在点击事件上从 jquery 触发 vue 方法

Posted 2023-02-22

【中文标题】在点击事件上从 jquery 触发 vue 方法

【英文标题】：Fire vue method from jquery on click event

【发布时间】：2018-02-09 22:42:16

【问题描述】：

我正在尝试将点击事件附加到已经存在的 dom 元素。

<div class="logMe" data-log-id=" data.log "></div>
...
<div id="events"></div>

我似乎无法在我的 jquery 点击处理程序中访问外部 vue 方法。它会抛出logData is not defined。

new Vue(
   el: '#events',
   mounted() 
      $('.logMe').on('click', function() 
           const data = $(this).data('log-id');
           this.logData(data); // throws logData is not defined
      );
   ,
   methods: 
      logData(id) 
         console.log(id); // never fires
         ... hit server
      ,
   ,
);

如果有人知道将点击事件附加到.html 元素的更好方法，那就太好了！但是我怎样才能冒泡并找到我的 vue 方法呢？ Here's a fiddle to illustrate

【问题讨论】：

How to access the correct `this` inside a callback?的可能重复

"logData(id) " ... 对我来说似乎不是一个有效的语法？

@axel.michel 更新methods:

我假设 data.log 是由 Vue 以外的东西设置的？

@Bert yep 服务器由 django 模板呈现。我只想通过 vue 附加点击事件。不确定是否可能：\

【参考方案1】：

为了让你的代码正常工作，你可以这样写：

console.clear()

new Vue(
   el: '#events',
   mounted() 
      $('.logMe').on('click', (evt) => 
        console.log("called")
           const data = $(evt.target).data('logId');
           this.logData(data); 
      );
   ,
   methods: 
      logData(id) 
         console.log(id);
      ,
   ,
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue@2.4.2"></script>
<div class="logMe" data-log-id="10">Something</div>
<div id="events"></div>

请注意，代码使用箭头函数来定义单击处理程序，以便捕获适当的 this 以调用 Vue 上的 logData 方法。但是，这样做意味着您丢失了想要从 data 属性获取数据的this，因此示例使用了evt.target。

还有一种替代方法，您可以在变量中捕获 Vue 并直接从您的 jQuery 事件中调用该方法。

console.clear()

const app = new Vue(
   el: '#events',
   methods: 
      logData(id) 
         console.log(id); // never fires
      ,
   ,
);

$('.logMe').on('click', function()
  app.logData($(this).data("logId"))
);

<script src="https://unpkg.com/vue@2.4.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="logMe" data-log-id="10">Something</div>
<div id="events"></div>

【参考方案2】：

更简单的解决方案 =

window.app = new Vue(
   el: "#app",
   methods: 
      myMethod(data)  ... 
   


// jQuery
window.app.myMethod(data);