V-model On Input That Dynamically Changes Value By Other Script ?

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 wann

Solution 1:

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'))

Solution 2:

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

Solution 3:

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