Vue Does not Rendering array update view when the array value is changed

Question

Vue app uses v-for for rendering the array or list normally.
This is an example.
JsFiddle Example

 new Vue({
  el:'#mainapp',
  data:{
    items:[0,0, 0]
  },
  methods:{
    updateVaule:function(index){
      this.items[index]++;
      alert('current value'+this.items[index]);
    }
  }
})

//Html file

    <div id="mainapp">
      <span v-for="(item,index) in items" v-on:click="updateVaule(index)">{{item}}</span>
    </div>

But when the user clicking the span tag, the view is not updated though value of items had been changed.
I've tried to add v-bind:key=index to the span tag, but this didn't affect anything.
To render the updated array, how does the app have to work?
What am I wrong?

I appreciate the quick comeback. In this example, the question should have been closed, as off topic for example. It really doesn't belong on SO. So, I am only asking to be really thoughtful when voting EDIT on triage. You see, if the majority votes "edit", then others are asked to edit. Which is pointless with questions that can't be fixed by editing. That is all there is to this. I hope that makes sense? — GhostCat
– GhostCat, Commented Oct 5, 2018 at 9:12

tony19 · Accepted Answer · 2022-07-15 22:21:29Z

3

You can use Vue's $set method to change the array elements.

new Vue({
  el:'#mainapp',
  data:{
    items:[0,0, 0]
  },
  methods:{
    updateVaule:function(index){
      this.$set(this.items, index, this.items[index] + 1)
      alert('current value'+this.items[index]);
    }
  }
})

Fiddle

More info on $set method and reactivity in depth here

edited Jul 15, 2022 at 22:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 22, 2018 at 10:39

Allkin

1,0989 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Allkin Over a year ago

As explained in Common Beginner Gotchas(vuejs.org/2016/02/06/common-gotchas/…), you should use array methods like push, splice or whatever and never modify the indexes like this a[index] = 1 nor the .length property of an array. Since the abandonment of Object.observe and Array.observe, vue can't pick the changes made the way you did (here is where the $set method comes in).

Collectives™ on Stack Overflow

Vue Does not Rendering array update view when the array value is changed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related