时间戳

首页 > 解决方案 > 带有 Vue.js 的 jQuery - $(this) 在方法中不起作用

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

问题描述

首先，我知道将 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()函数？

标签： javascriptjqueryvue.js

解决方案

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

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

推荐阅读