Vue中 this.$set 的用法

Vue中 this.$set 的用法

• Vue.set( target, propertyName/index, value )
  • target 要更改的数据源（可以是一个对象或者数组）
  • key 要更改的具体数据（索引）
  • value 重新赋的值

<template>
 <div>
   <div v-for="(item,index) in testList" :key="index">
     <span>{{item.text}}</span>
   </div>
   <button @click="changeData">更改数据</button>
 </div>
</template>

<script>
export default{
	data() {
		return{
			testList: [
				{id: 0,text: '测试1'},
				{id: 1,text: '测试2'},
				{id: 2,text: '测试3'},
			]
		}
	},
	mounted() {
		// 对象的值更改了，但是视图没有更新
		this.testList[0] = {id: 4,text: '测试5'};
	},
	methods:{
		changeData() {
			let newObj = this.testList[0];
   			newObj.text = '我是更改后的测试5';
   			// 对象的值更改了，视图也更新了
   			this.$set(this.testList,0,newObj);
		}
	}
}
</script>