The page does not automatically update when new properties are added to the object. It can be solved with Vue.set method.
Modify the value in the array by subscript, and the page will not be automatically updated. It can be solved with array method or Vue.set method.
Special note: Vue.set cannot add attributes to vm or the root data object data! ! !
Problems when modifying objects:
<div id="APP">
<h3>{<!-- -->{title}}:</h3>
<p>{<!-- -->{info.name}}</p>
<p>{<!-- -->{info.age}}</p>
<button @click="editAge">Modify student age</button>
</div>
const vm = new Vue({
el: "#APP",
data(){
return {
title: "Student Information",
info:{
name: "Zhang San",
age: 20
}
}
},
methods: {
editAge(){
this.info.age = 26;
}
}
});
Note: When we modify the original data in data, Vue can recognize it and automatically update the content of the page.
But when we add content to the object, Vue can’t recognize it.
<div id="APP">
<h3>{<!-- -->{title}}:</h3>
<p>Name: {<!-- -->{info.name}}</p>
<p>Age: {<!-- -->{info.age}}</p>
<button @click="addAge">Add student age</button>
</div>
Note: Outputting an attribute that does not exist in an object on the page will not cause an error.
const vm = new Vue({
el: "#APP",
data(){
return {
title: "Student Information",
info:{
name: "Zhang San"
}
}
},
methods: {
addAge(){
this.info.age = 20;
}
}
});
Note: After clicking the button, the age of the student is not rendered on the page. But when we enter vm.info.age in the console, we can see that the age attribute has indeed been added to info.
Reason: When you enter vm.info in the console, you can find that the newly added property has no get and set methods, so Vue cannot monitor the change of age, and it will not be automatically rendered to the page .
Using Vue.set to modify objects:
Solving the above problems is very simple, just add attributes with the Vue.set method.
<div id="APP">
<h3>{<!-- -->{title}}:</h3>
<p>Name: {<!-- -->{info.name}}</p>
<p>Age: {<!-- -->{info.age}}</p>
<button @click="addAge">Add student age</button>
</div>
const vm = new Vue({
el: "#APP",
data(){
return {
title: "Student Information",
info:{
name: "Zhang San"
}
}
},
methods: {
addAge(){
// Syntax format: Vue.set(object to be modified, attribute name, attribute value);
Vue.set(this.info, 'age', 20);
// You can also use this.$set for the same effect.
// this.$set(this.info,'age',20);
}
}
});
Note: Vue can recognize the attributes added through the Vue.set method, and it will be automatically rendered to the page. And enter vm.info in the console, you can see that the newly added age attribute also has get and set methods.
It should be noted that Vue.set cannot directly add attributes to data.
<div id="APP">
<h3>Title: {<!-- -->{title}}</h3>
<p>Name: {<!-- -->{info.name}}</p>
<button @click="addTitle">Add title</button>
</div>
Note: When an attribute that does not exist is directly entered on the page, an error will occur.
const vm = new Vue({
el: "#APP",
data(){
return {
info:{
name: "Zhang San"
}
}
},
methods: {
addTitle(){
Vue.set(this,'title','student information');
}
}
});
Note: When adding attributes directly in data, an error will occur! ! !
Summary: That is to say, Vue.set can only add attributes to an object in data, but not directly to data.
Problems when modifying arrays:
<div id="APP">
<h3>{<!-- -->{title}}:</h3>
<ul>
<li v-for="(item,index) in list" :key="index">{<!-- -->{item}}</li>
\t</ul>
<button @click="editList">Modify the first hobby</button>
</div>
const vm = new Vue({
el: "#APP",
data(){
return {
title: "Hobby",
list: ['Strawberry', 'Seed Cake', 'Spicy Strip']
}
},
methods: {
editList(){
this.list[0] = 'Hot Pot';
}
}
});
Note: When we modify the content in the array through the subscript, Vue cannot monitor it. This is because Vue does not have get and set methods for each value in the array. So the page won’t change after modification.
However, Vue repackages seven methods in the array for us to use to manipulate the array. They are:
// add push at the end
Array.push(value to be added);
// tail delete pop
array.pop();
// add unshift to the head
Array.unshift(value to be added);
// head delete shift
array.shift();
// array specifies to delete splice
Array.splice (where to start deleting, how many to delete);
// Array specifies to add splice
Array.splice(add before the first few, 0, the value to be added);
// array designation to replace splice
Array.splice(replace the number of content, 1, the replaced value);
// reverse the array reverse
array.reverse();
// sort the array sort
array.sort((a,b) => { return a-b; });
Note: Only methods that can modify the original array can be monitored by Vue. When using other methods of the array, you need to reassign the modified value to the original array.
Therefore, we can use the splice method to solve the above problems.
<div id="APP">
<h3>{<!-- -->{title}}:</h3>
<ul>
<li v-for="(item,index) in list" :key="index">{<!-- -->{item}}</li>
\t</ul>
<button @click="editList">Modify the first hobby</button>
</div>
const vm = new Vue({
el: "#APP",
data(){
return {
title: "Hobby",
list: ['Strawberry', 'Seed Cake', 'Spicy Strip']
}
},
methods: {
editList(){
this.list.splice(0, 1, 'Hot Pot');
}
}
});
Note: After modifying the content in the array through the splice method, Vue can recognize it and update the content in the page.
Using Vue.set to modify an array:
<div id="APP">
<h3>{<!-- -->{title}}:</h3>
<ul>
<li v-for="(item,index) in list" :key="index">{<!-- -->{item}}</li>
\t</ul>
<button @click="editList">Modify the first hobby</button>
</div>
const vm = new Vue({
el: "#APP",
data(){
return {
title: "Hobby",
list: ['Strawberry', 'Seed Cake', 'Spicy Strip']
}
},
methods: {
editList(){
// Syntax format: Vue.set(array to be modified, subscript, modified value);
Vue.set(this.list, 0, 'Hot Pot');
}
}
});
Note: Vue.set method can also modify the content in the array through the subscript. 
Original author: Wu Xiaotang
Creation event: 2023.3.16
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge