Vue学习日记part2 Vue.set

Vue.set( target, propertyName/index, value )

用法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

参考：Vue—Vue.set的使用

栗子：

<div id="app">
	<p v-for="(item,index) in items" :key="index">{{item}}</p>
	<button @click="add()">添加</button>
</div>

new Vue({
	el:'#app',
	data:{
		items:['公交卡', '银行卡', '饭卡']
	},
	methods:{
		add(){
			this.items[0] = '美容卡'
			console.log(this.items);
		}
	}
})

可以看到控制台打印出来了，但是页面没有更新到

注意：有三种方法可以实现，分别是Vue.set, vm.$set, replace

Vue.set

new Vue({
	el:'#app',
	data:{
		items:['公交卡', '银行卡', '饭卡']
	},
	methods:{
		add(){
			Vue.set(this.items,1,"门禁卡")
		}
	}
})

vm.$set

new Vue({
	el:'#app',
	data:{
		items:['公交卡', '银行卡', '饭卡']
	},
	methods:{
		add(){
			this.$set(this.items,1,"美容卡")
		}
	}
})

添加多条数据用Object.assign

new Vue({
	el:'#app',
	data:{
		items:['公交卡', '银行卡', '饭卡']
	},
	methods:{
		add(){
			this.items = Object.assign({}, this.items, { a: 1, b: 2 })
		}
	}
})