vue input 双向绑定 代码修改input的值 其绑定的数据 没有变

Question

dispatchEvent 试了下 就第一次有效 后面不知怎么就不起作用了

请问怎么同步呢

Answer 1

vue双向绑定本质是监听input事件，你直接修改值之后不会触发input事件所以双向绑定并没有生效。你需要每次修改input.value之后，手动触发input事件

Answer 2

jquery与vue就不应该混用，二者对ｄｏｍ的操作是不同步的。这种问题并没有什么好的解决方案吧。

Answer 3

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-modal 其实是语法糖，内部原理大致是：

 <input
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >

你直接使用jquery修改input 的值会导致 vue对应的自定义事件$emit('input', $event.target.value) 无法触发，也就会导致data中的数据无法更新。

不推荐你这么使用 直接使用vue 的语法进行数据更新就可以