CODEWITHSUNDEEP
vue.jsvuejs2
R. Gurung
R. Gurung

Reputation: 1507

updating $vm0 doesn't update data instantly

I have a VueJS- HTML file like this 

<!DOCTYPE html> 
<body>
  <div id="root">
    <ul>
      <li v-for="name in names" v-text="name"></li>
    </ul>
    <input type="text" id="input" v-model="newName" />
    <button @click="addName">Add Name</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"</script>

  <script>
    new Vue({
      el: '#root',
      data: {
        newName: '',
        names: ['Joe', 'Mary', 'Jane']
       },
      methods: {
        addName() {
          this.names.push(this.newName);
          this.newName = '';
        }
      }
    });
  </script>
</body>

Whenever I do this in console

$vm0.names[0] = 'Gurung'

It doesn't update the first name instantly but I have to add a new name to get it updated. Another thing is this variable works only when I click on Root in the Vue Extension. One guess of mine was that $vm0 was just used by extension but why does doing manipulations with it changes it in DOM too (not instantly as I told earlier).

Upvotes: 1

Views: 96

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue. When you modify the length of the array, e.g. vm.items.length = newLength.

Reference

$vm0.$set($vm0.names, 0, 'Grung');

Upvotes: 2

Related Questions