时间戳

首页 > 解决方案 > 有什么方法可以使用 jQuery 事件触发器来触发 Vuejs 函数？

javascript - 有什么方法可以使用 jQuery 事件触发器来触发 Vuejs 函数？

问题描述

我目前正在尝试在 Vue 组件中触发更改事件。

组件模板包含一个选择元素。当我使用 jQuery 触发元素上的更改事件时，Vue 组件没有检测到它。

示例代码：

<mycomponent></mycomponent>

<script>
    Vue.component("mycomponent", {
        template: `
            <select id="mySelect" @change="alert('detected a change')">
                <option value="0">Select color</option>
                <option value="1">Red</option>
                <option value="2">Yellow</option>
                <option value="3">Blue</option>
            </select>
        `
    });
    
    setTimeout(function() {
        $("#mySelect").val(2);
        $("#mySelect").trigger("change");
    }, 5000);
</script>

我的成就是触发了 VueJS 事件，因此会触发警报。

是否有任何选项可以通过从 jQuery 触发事件来实现？

或段落从 vanilla onchange 函数触发 Vue 组件函数？

例子：

<select id="mySelect" :onchange="MY_VUEJS_FUNCTION_GOES_HERE">

谢谢你的帮助！

----为什么我需要结合 jQuery 和 VueJS ---

你们中的一些人问了，所以我将解释我的主要目标以及为什么我需要将 VueJS 和 jQuery 结合起来。

我有一个 jQuery 库，它使选择元素更加高效，它基本上隐藏了真正的选择，并以相同的方式进行了 div 选择。当您从选择中选择一个选项时，它会更新隐藏的选择。

当我的选择被更改时，我需要获得一个回调，以便我可以更新组件上的其他元素。

现在我无法得到回调。

------经过一番研究------

这似乎是不可能的..我没有将它作为答案发布，因为也许有人知道一个技巧/一种让它发生的方法。

可悲的是，我发现的唯一选择是将 VueJS 中的库重建为一个组件并以此来使用它。

标签： javascriptjqueryvue.js

解决方案

正如我所说，使用 v-model 和手表可以让你在价值改变时自由地做你想做的事。下面的例子:)

new Vue({
  data: {
    color: ''
  },
  watch: {
    color: function (color) {
      // Here you can write whatever code you want :)
      console.log('Color index changed to', color)
    }
 }
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
   <select id="mySelect" v-model="color">
      <option value="0">Select color</option>
      <option value="1">Red</option>
      <option value="2">Yellow</option>
      <option value="3">Blue</option>
  </select>
</div>

推荐阅读