当输入值从 VueJS 更改时，JQuery 更改事件未触发答案

【问题标题】：JQuery change event not firing when input value changed from VueJS当输入值从 VueJS 更改时，JQuery 更改事件未触发
【发布时间】：2021-05-23 12:39:56
【问题描述】：

我有一个最初用 Jquery 编写的大型项目，目前我们正在使用 VueJS 进行重构。所以基本上，这个案例是这样的：

html

<div id="app">
     <input :value='myVal'/>
     <button type="button" @click="onClick">
        Press me
     </button>
</div>

new Vue({
  el: "#app",
  data: {
    myVal: 'a'
  },
  methods: {
   onClick() {
    this.myVal = 'b'
  }
}
})


$(function () {
    $(document).on('change', 'input', function() {
        alert('Value changed')
    })
})

我的目标是控制来自 VueJS 的值，但能够从 JQuery 监听输入的变化。问题是当输入的值从 VueJS 更改时，我看不到警报“Hello”弹出。但是，当我通过在其中键入内容手动编辑输入时，警报会按预期弹出。有什么想法可以使这种模式起作用吗？

这是Fiddle

【问题讨论】：

这不能“自动”完成。最好的办法是将所有 JQuery 内容迁移到 Vuejs，但在那之前，您可以在值上配置 Vuejs 监视并触发 JQuery 事件（例如，$el.trigger("change")，如果我没记错的话）
我同意逐步淘汰 jQuery，我认为这是您的目标。 Vue 代码的一个问题是输入应该绑定到 v-model 而不是值：<input v-model='myVal'/>。您还可以直接向输入添加更改处理程序：<input v-model='myVal' @change="changeHandler"/>

标签： javascript jquery vue.js

【解决方案1】：

使用input 事件。如果您更改输入字段的文本，这将立即触发。把代码改成

$(document).on('input', 'input', function() {
 alert('Value changed')
})

注意：最好尝试在 vue js 中处理更改事件。混合使用 jquery 和 vue js 不是一个好习惯

【讨论】：