Chapter -Vue.set

Vue.set

Introduction:

Add a property to a responsive object and ensure that the new property is also responsive, and trigger view updates. It must be used to add new attributes to the responsive object.

What he meant to say, when an instance of an object update vue, vue is unable to detect instances of change, so it will not trigger a view update, we look at an example:

<template>
	<div>
	<Button @click="add">增加数组的东西</Button>
	<div>{{set}}</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	export default{
		data () {
            return {
				set:{a:111,b:222}
            }
        }，
        methods: {
			add(){
				this.set.c = 333;
				console.log(this.set);
        }
	}
</script>

<style>
</style>

　　We look at the effect of the page before clicking the button does not:

This time we click of a button, trigger:

this.set.c = 333;

This time we look at the console print:

We can find c: 333 has been added to an instance of an object, we now look at the content on the page:

Content on the page has not changed, which means that although the instance of the object has changed, but does not trigger vue view updates.

Here we look at Vue.set command, modify code above.

<template>
	<div>
	<Button @click="add">增加数组的东西</Button>
	<div>{{set}}</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	export default{
		data () {
            return {
				set:{a:111,b:222}
            }
        }，
        methods: {
			add(){
				Vue.set(this.set,'c','333');
        }
	}
</script>

<style>
</style>

　　

Then we click of a button, look at the page:

From this we can see that the use Vue.set will be able to update the view.

In addition to using Vue.set addition, we can also use this. $ Set, which is the alias global Vue.set methods.

 

 

Your criticism is the greatest encouragement to me, please correct me.