能否通过jQuery事件触发调用Vue.js中定义的函数？

解决方案 #

方案1：改用原生事件触发替代jQuery trigger #

你原来的代码失效是因为Vue的@change绑定的是原生DOM事件监听器，部分版本jQuery的trigger方法只会触发jQuery内部事件队列的回调，不会同步触发原生事件监听。修改触发逻辑即可：

setTimeout(function() {
    $("#mySelect").val(2);
    // 手动触发原生change事件
    document.querySelector('#mySelect').dispatchEvent(new Event('change'))
}, 5000);

方案2：绑定原生onchange属性到Vue组件方法 #

你提到的直接绑定原生onchange的需求可以在组件的mounted钩子中实现，不需要在模板里写动态绑定：

Vue.component("mycomponent", {
    methods: {
        handleChange() {
            alert('detected a change')
            // 这里写你要更新其他组件元素的逻辑
        }
    },
    mounted() {
        // 直接把Vue组件方法赋值给原生onchange属性
        this.$el.onchange = this.handleChange
    },
    template: `
        <select id="mySelect">
            <option value="0">Select color</option>
            <option value="1">Red</option>
            <option value="2">Yellow</option>
            <option value="3">Blue</option>
        </select>
    `
});

方案3：直接使用jQuery选择器插件的自带回调 #

你用的jQuery模拟选择器库一般都会提供选择变更的专属回调，直接在回调中调用Vue方法是最稳妥的方案，不需要依赖事件监听：

Vue.component("mycomponent", {
    methods: {
        handleChange(newVal) {
            // 处理选择变更逻辑
        }
    },
    mounted() {
        const vm = this
        // 初始化你的jQuery选择器插件，绑定它的变更回调
        $(this.$el).yourSelectPlugin({
            onChange: function(selectedVal) {
                vm.handleChange(selectedVal)
            }
        })
    }
});

不需要重写整个jQuery插件，以上三种方案都可以直接实现你的需求。

内容的提问来源于stack exchange，提问作者bado yasi