javascript - v-model on input that dynamically changes value by other script ? - Stack Overflow

admin管理员组

文章数量:1356908

I have two input that store lat and lng from google map script, if the user changes the marker's position => these two inputs get the lat and lng that the user pecked, so I wanna get the value of these two inputs, I tried v-model but it didnt work I actually noticed that the v-model will be fired only if I changed the value of these input by typing or pasting something in. Is there a way that I can get the value of these inputs (like on-change) to my Vue instance?

I have two input that store lat and lng from google map script, if the user changes the marker's position => these two inputs get the lat and lng that the user pecked, so I wanna get the value of these two inputs, I tried v-model but it didnt work I actually noticed that the v-model will be fired only if I changed the value of these input by typing or pasting something in. Is there a way that I can get the value of these inputs (like on-change) to my Vue instance?

• javascript
• vue.js
• vue-ponent

Share Improve this question Follow asked Oct 31, 2016 at 22:40 SiempaySiempay 1,01211 gold badge1313 silver badges3434 bronze badges 2

• What mechanism is changing the inputs? – Roy J Commented Nov 1, 2016 at 0:15
• just a js script putting the values in the inputs when the marker of the map change position – Siempay Commented Nov 1, 2016 at 9:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

To trigger Vue.js to read your input's value after it changes dynamically from an external script, you have to call:

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

on your element. This works on both <input> and <textarea> elements. For <select> elements you would have to call:

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

You need to watch your two variables, and assign the value to the new one.

Watch your variables using watch properties:

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
      }
   }
});

本文标签： javascriptvmodel on input that dynamically changes value by other script Stack Overflow