Vue Update Value

Posted on  by admin
For all object changes that need reactivity use Vue.set(object, prop, value).

For array mutations, you can look at the currently supported list here.

For vuex you will want to do Vue.set(state.object, key, value). So just for others who come to this question.

It appears at some point in Vue 2.* they removed this.items.$set(index, val) in favor of this.$set(this.items, index, val).

Splice is still available and here is a link to array mutation methods available in vue link. VueJS can't pickup your changes to the state if you manipulate arrays like this. As explained in Common Beginner Gotchas, you should use array methods like push, splice or whatever and never modify the indexes like this a[2] = 2 nor the .length property of an array. As stated before - VueJS simply can't track those operations(array elements assignment).All operations that are tracked by VueJS with array are here.But I'll copy them once again:.

During development, you face a problem - how to live with that :). push(), pop(), shift(), unshift(), sort() and reverse() are pretty plain and help you in some cases but the main focus lies within the splice(), which allows you effectively modify the array that would be tracked by VueJs.So I can share some of the approaches, that are used the most working with arrays.

You need to replace Item in Array:. Note: if you just need to modify an item field - you can do it just by:. And this would be tracked by VueJS as the item(Object) fields would be tracked.


Vue.set() and Vue.delete() might be used for adding field to your UI version of data.

For example, you need some additional calculated data or flags within your objects. You can do this for your objects, or list of objects(in the loop):. And send edited data back to the back-end in the same format doing this before the Axios call:.

Modified5 years, 3 months ago. Disclaimer: I know that there is data biding in Vue.js.

So I have this:.

An input that will trigger a method called update every time the user type in something.

The idea here is to change the value of the data property called info with the value typed in the input by the user.

But, for some reason, the value of the data attribute doesn't change.

The current input value is printed normally in the console with the console.log(value) call every time the update method is fired, but nothing changes to the info attribute.

So, how to make this work?

11 gold badge1111 silver badges2121 bronze badges.

2121 bronze badges. I'm not seeing what your problem is; your example works perfectly:.

Declan NnadozieDeclan Nnadozie

Not the answer you're looking for? Browse other questions tagged javascripthtmldomvue.js or ask your own question.