Vue.js 如果通过 jquery 更新，Vuejs 绑定不起作用

发布于10月26日

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="testing";那样做

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

有什么简单的方法处理吗？

推荐答案

最好的方法是让jQuery更改数据，而不是输入val，以保持所有内容的同步.

这样地:

let mainState = { inputVal: 'testing' };

let app = new Vue({
  el: '#app',
  data: mainState,
  methods: {
    vueThing() {
      this.inputVal = 'Vue value';
    }
  }
}); 

$('#jqThing').on('click', function() {
  mainState.inputVal = 'jQuery Value';
});

https://jsfiddle.net/6evc921f/

或者将jQuery元素构造函数包装在Vue组件中，只在Vue增强的页面中使用它们