Question

我正在尝试将click事件附加到已存在的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

Answer 1

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

＆＃13;

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);
      },
   },
});

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

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"))
});

＆＃13;

<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>

＆＃13;

Answer 2

更简单的解决方案=

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

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

来自jquery的点击事件的fire vue方法

2 个答案: