How to use Vue.set and this.$set in Vue

This article mainly introduces the relevant knowledge of "how to use Vue.set and this.$set in Vue". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use Vue.set and this.$set in Vue" can help you solve the problem.

First, why there is Vue.set

Due to the limitations of JavaScript, Vue cannot detect changes to arrays and objects in data, so view updates are not triggered.

Second, the solution array 1. Use the mutation method provided by Vue

Vue encapsulates these JS array methods, through which array updates can be detected.

two。 Replace the original array as a whole

As in the following example, you want to implement vm.items [1] = 'excess'

{{index}}: {{item}} let vm = new Vue ({el:'# app', data: {items: ['await,' baked,'c']}, created () {this.items = ['averse,' test',']}}) 3. Use Vue.set (see later) object 1. Replace the entire original object

As in the following example, add a key-value pair {test: 'newthing'} to object

{{name}}: {{value}} let vm = new Vue ({el:'# app', data: {object: {title: 'How to do lists in Vue', author:' Jane Doe', publishedAt: '2016-04-10'}} Created () {this.object = {title: 'How to do lists in Vue', author:' Jane Doe', publishedAt: '2016-04-10, test:' newthing'}}) 2. Use Vue.set (see later) 3. Vue.set for arrays

Vue cannot detect changes in the following array:

When setting an array item directly with an index value, for example, vm.list [0] = newValue

When you modify the length of an array, such as vm.list.length=newLength

Take a chestnut.

Var vm = new Vue ({data: {items: ['averse,' baked,'c']}}) vm.items [1] ='x' / / not responsive vm.items.length = 2 / / not responsive

You can use Vue.set or this.$set at this time

Usage

Vue.set (target,index,newValue)

/ / Vue.setVue.set (vm.items, indexOfItem, newValue) / / this.$setvm.$set (vm.items, indexOfItem, newValue) for objects

Vue cannot detect the addition or removal of property. Because Vue performs an getter/setter transformation on property when the instance is initialized, property must exist on the data object for Vue to convert it to responsive.

Take a chestnut.

Var vm = new Vue ({data: {avm.a`) / / `vm.a` is responsive vm.b = 2Accord / `vm.b` is non-responsive usage

Vue.set (target,key,value)

Vue.set (vm.someObject, 'baked Magazine 2) this.$set (this.someObject,'b',2) pay attention

Vue does not allow dynamic addition of root-level responsive attributes

Const app = new Vue ({data: {a: 1} / / render: h = > h (Suduko)}). $mount ('# app1') Vue.set (app.data, 'baked, 2)

You can only use the Vue.set (object, propertyName, value) method to add responsive properties to nested objects

Var vm=new Vue ({el:'#test', data: {/ / data already exists info root attribute info: {name:' Xiaoming';}); / / add a gender attribute Vue.set (vm.info,'sex',' male') to info; fourth, use scenarios

When we make changes to arrays or objects in data, some operations are unresponsive, and Vue does not detect data updates, so view updates are not triggered. At this point, you need to use Vue.set () for responsive data updates.

This is the end of the introduction to "how to use Vue.set and this.$set in Vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.