javascript - 如果通过 jquery 更新,Vuejs 绑定(bind)不起作用

标签 javascript jquery html vue.js vuejs2

Jsfiddle

HTML:

<div id="testVue">

<input id="test" v-model="testModel"/>

<button @click="clickMe()">Click me</button>

<button @click="showValue()">Show value</button>

</div>

Javascript

var testVue = new Vue({
  el: '#testVue',

  data: {
    testModel: 'Hello Vue!'
  },

  methods: {

    clickMe: function() {
        $("#test").val("testing");
        console.log(this.testModel);
    },

    showValue: function() {
        console.log(this.testModel);
    }
  }
});

我完全理解我不应该在 Vuejs $("#test").val("testing"); 中这样做,我应该像 this.testModel="测试”;

但是我不明白为什么这个基本的绑定(bind)在Vuejs中不起作用?我有很多 HTML 组件通过 jquery 更新输入框,例如 Calendar、Autocomplete 和 Select2,它们都会通过非 vuejs 方式更新输入框。

有什么简单的方法可以解决这个问题吗?

最佳答案

现在回答为时已晚,但对于将来偶然发现此问题的任何人都可以使用我的建议来处理。

I had read somewhere that This is a jQuery problem, trigger/val() doesn't dispatch native events in some cases. So we will dispatch native JS Event after changing values with jQuery val()

$("#test").val("testing")[0].dispatchEvent(new Event('input'))

注意事项:-

  • 在Vue中,texttextarea元素使用input事件和checkboxesradioselect 使用 change 作为事件。因此相应地调度事件;
  • 我假设您使用 id 选择器 $("#test") 将其应用于单个 dom 元素,这就是我选择 [0] th 元素的原因。如果你打算将它用于多个元素,那么你可以使用 for 循环来 dispatchEvent on al。

引用:- Vue Issues on Github

关于javascript - 如果通过 jquery 更新,Vuejs 绑定(bind)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46955230/

相关文章:

javascript - 如何使用 contenteditable 属性避免在内联编辑中复制 HTML 和 CSS 内容

html - 如何在 HTML 电子邮件代码中将文本放在图像上?

javascript - AngularJS 应用程序中部署服务器上的相对路径问题

javascript - 如何使用 jquery 拖动 td 元素并将其放入表中的另一个 td 元素中

javascript - 设置间隔和延迟

css - 如何在 html 中创建带有子箭头的无序列表?

html - 创建一个新的基本容器以介于两个现有容器之间

javascript - BrowserWindow loadURL 到子窗口中?

javascript - 延迟 CSS 转换 2 秒

javascript - 如何使用javascript隐藏JSP生成的文本字段?