带有 Vue.js 的 jQuery - $(this) 在方法中不起作用

Question

首先，我知道将 jQuery 与 Vue 混合并不是一个好主意。但是，我仍然尝试在单击后对元素执行某些操作，但 $(this) 不起作用。

methods: {
  openSMS() {
    $(this).hide(); // <-- not working here..
    // More code...
  },
  addEventListeners() {
    $(document).ready(function() {
      $(".ml-inbox-msg-item").click(function() {
        // $(this).hide() <-- it works here
        InboxSidebar.openSMS();
      });
    });
  }
}

一个页面上有很多.ml-inbox-msg-item元素。

如果我将$(this).hide() 放在.click 函数中，那么它就可以工作。有没有办法将它传递给openSMS() 函数？

Answer 1

这是因为openSMS() 的作用域与click 处理函数的作用域不同。假设您可以更改方法签名，修改 openSMS() 以接受元素引用作为参数：

methods: {
  openSMS(el) {
    $(el).hide();
  },
  addEventListeners() {
    $(document).ready(function() {
      $(".ml-inbox-msg-item").click(function() {
        InboxSidebar.openSMS(this);
      });
    });
  }
}