Question

我正在使用vuejs 1. *和jquery.But我无法触发v-on：来自jquery的click事件

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

我的jquery代码是

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

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

Answer 1

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

当您第一次声明Vue对象时，可以将其保存到变量（也不建议使用全局窗口变量，但它适用于此示例）

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

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

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

同样，这不是推荐的完成此任务的方法，它只是一种可行的方法。

Answer 2

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

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

Answer 3

如果它不必是触发refresh（）的click事件，您可以使用组件的实例直接调用vm.refresh（）。

如何触发v-on：从jquery触发器中单击？

3 个答案: