输入的 v-model 通过其他脚本动态更改值？答案

【问题标题】：v-model on input that dynamically changes value by other script ?输入的 v-model 通过其他脚本动态更改值？
【发布时间】：2017-03-14 02:14:15
【问题描述】：

我有两个输入存储来自谷歌地图脚本的 lat 和 lng，如果用户更改标记的位置 => 这两个输入得到用户啄的 lat 和 lng，所以我想得到这两个输入的值，我尝试了 v-model 但它不起作用我实际上注意到只有当我通过键入或粘贴某些内容来更改这些输入的值时才会触发 v-model。有没有办法可以将这些输入的值（如更改）获取到我的 Vue 实例？

【问题讨论】：

什么机制改变了输入？
只是一个js脚本，当地图的标记改变位置时，将值放入输入中

标签： javascript vue.js vue-component

【解决方案1】：

要在输入值从外部脚本动态更改后触发 Vue.js 读取输入值，您必须调用：

document.querySelector('#element-id').dispatchEvent(new Event('input'))

在您的元素上。这适用于 <input> 和 <textarea> 元素。对于 <select> 元素，您必须调用：

document.querySelector('#element-id').dispatchEvent(new Event('change'))

【讨论】：

【解决方案2】：

您需要观察您的两个变量，并将值分配给新变量。

【讨论】：

什么变量？？来自地图脚本？

【解决方案3】：

使用 watch 属性观察你的变量：

HTML：

<div id="el">
  <form>
    <input v-model="foo">
    <input v-model="bar">
  </form>
  <p>{{ foo }}</p>
  <p>{{ bar }}</p>
</div>

JS：

new Vue({
   el: "#el",
   data: {
       foo: '',
       bar: ''
   },
   watch: {
      foo: function(value) {
         this.foo = value
       },
      bar: function(value) {
         this.bar = value
      }
   }
});

【讨论】：

是的，这通常会起作用，但如果输入通过其他脚本而不是用户键盘改变值，我认为这在 vuejs 上不存在 ..
什么在 vuejs 中不存在？！如果输入的值改变（DOM）并且如果你尝试你的“脚本”，这些值也会改变。试试代码或给我们sn-p。
这里的问题是谷歌地图的脚本改变了输入的值，但是 v-model dosent 触发，v-model 仅在我在输入中输入某些内容时触发，而不是当地图脚本改变了它的值
所以使用watch可以检测到onchange事件！
watch 对我不起作用——阅读文档我认为这是出于不同的目的（观察 vue 实例的数据属性的变化）。 op 和我希望 v-model 被一个对 Vuejs 一无所知的脚本更改，并且只是直接操作输入的值，它不会触发任何更改/keydown 等事件。 @brahimm 你找到解决方案了吗？