我如何触发 v-on：从 jquery 触发器单击？答案

【问题标题】：How do i trigger v-on:click from jquery trigger?我如何触发 v-on：从 jquery 触发器单击？
【发布时间】：2016-08-03 20:45:08
【问题描述】：

我正在使用 vuejs 1.* 和 jquery。但是我无法从 jquery 触发 v-on:click 事件

<a id="test" v-on:click="refresh" href="#" >Cick </a>

我的 jquery 代码是

$("#test).trigger('click'); 我已经尝试触发

$("#test).trigger('v-on:click'); 也可以

【问题讨论】：

你不能直接调用refresh吗？
您的示例中也缺少一些引号 $("#test)。它们在您的代码中是这样的吗？

标签： jquery html backbone.js vue.js

【解决方案1】：

这不是一个理想的解决方案，但您可以在紧要关头使用它：

当你第一次声明 Vue 对象时，你可以将它保存到变量中（也不推荐使用全局 window 变量，但在本例中可以使用）

window.myVueObj = new Vue({...});

那么你可以直接调用refresh()方法来触发它：

$("#test).on('click',function(){
     window.myVueObj.refresh();
});

同样，这不是实现此目的的推荐方法，它只是一种可能的方法。

【讨论】：

它在页面重新加载后但在第一次加载页面时工作。它给出'TypeError：无法将未定义转换为对象'
尝试将其包装在一个就绪函数中，以确保加载所有需要的 DOM 元素和脚本：jQuery(document).ready(function() { (function ($) { })(jQuery); });

【解决方案2】：

您可以使用 jquery 将 jquery 事件绑定到准备就绪的元素。您将需要在事件处理程序中过滤掉鼠标点击，这样您就不会多次调用刷新。查看示例代码

<html>
<head>
<title>test</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<div id="app">
  <a id="test" v-on:click="refresh" href="#"> Refresh <a/>
  <p>
  <a onclick="triggerClick()"> jQuery Trigger </a>
</div>

<script>
function triggerClick() {
    console.log('triggering click from jQuery')
    $('#test').trigger('click')
}

new Vue({
    el: '#test',
    ready: function () {
        var self = this
        $(self.$el).on('click', function(evt) {
            // do not call refresh on mouse click
            if (typeof evt.originalEvent !== 'object') {
                self.refresh()
            }
        })
    },
    methods: {
        refresh: function () {
            console.log('refresh called')
        }
    }
})
</script>
</body>
</html>

【讨论】：

【解决方案3】：

如果不是触发 refresh() 的点击事件，您可以使用组件的实例直接调用 vm.refresh()。

【讨论】：