VUE动态修改或添加属性值---this.$set()

VUE 动态修改data 中数据或添加属性值

vue 中data 数据更新后页面不同步动态渲染更新

1. 为对象添加属性或修改指定属性

var student= {
   name: '李明'
};
this.$set(student, 'name', '陈明');//修改name属性值
this.$set(student, 'sex', '男');//追加age属性并赋值
console.log(student); //{name: '陈明', 'sex': '男'}

2. 为数组添加属性或修改数组值

//修改数组值
var arr = [1, 2, 3];
//this.$set(要修改的数组，数组下标，要修改/添加的值)
this.$set(arr, 3, 4);	//添加数组值
console.log(arr);//[1, 2, 3，4]

this.$set(arr, 0, 4);//修改数组值
console.log(arr);//[4, 2, 3]

3. 修改数组对象属性值（vue 2）

data(){
	materialList:[
	{
	  materialId: "19580",
	  deptMatterId: "350",
	  applicationMaterialId: "7505",
	  name: "身份证",
	  checkMain: "",
	  type: "办理材料",
	  delFlag: "0",
	  old: true,
	  examples: [],
	  styles: [],
	  fileList: []
	 },
	],
}
//为fileList中添加值
//starIndex:materialList下标
this.$set(
	this.materialList,strIndex,
	{...this.materialList[strIndex],
		fileList:[{name:'文件名',url:'http://123456.com'}]
	}
)
//添加后结果
materialList:[
	{
	  materialId: "19580",
	  deptMatterId: "350",
	  applicationMaterialId: "7505",
	  name: "身份证",
	  checkMain: "",
	  type: "办理材料",
	  delFlag: "0",
	  old: true,
	  examples: [],
	  styles: [],
	  fileList: [
	  {name:'文件名',url:'http://123456.com'}
	  ]
	 },
	],