例:
tableList: {},
1、往对象里面添加属性:
tableList: {
name1:[],
name2:[],
name3:[],
},
//给对象添加属性,比如tableList在加个name4,如果存在name4就是修改,不纯在就是增加了
this.$set( tableList, "name4", [] )
2、给对象某个属性赋值,比如name1赋值:
// 新增一条空数据
let newData = {
age: null,
number: null
};
this.tableList[name1].push(newData)
或者可以这样赋值,这边是给name1赋值为[]
//给对象赋值
Vue.set(this.tableList, name1, [])
//给对象添加属性,比如tableList在加个name4,如果存在name4就是修改,不纯在就是增加了
this.$set( tableList, "name4", [] )
补充:
vue中的vue.set()的使用
Vue.set( target, key, value ) / this.$set( target, key, value )
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value :重新赋的值
3、删除对象属性,比如删除name1
//删除
delete this.tableList['name1'] 或 delete this.tableList[name1]
tabList: [{
name: 'name1',
label: '标签1'
},
{
name: 'name2',
label: '标签2'
},
{
name: 'name3',
label: '标签3'
}
],
1、新增
let newData = {
name: this.valueOrg,
label: this.optionsOrg[i].label
}
this.tabList.push(newData);
2、删除,i就是下标,比如i=0的话就是删除数组第一条数据了
//根据下标删除数组
this.tabList.splice(i, 1);
3、修改,比如数组第二条数据增加一个属性
this.$set(this.tabList[1], 'disabled', true);
修改完之后就变成这样了:
tabList: [{
name: 'name1',
label: '标签1'
},
{
name: 'name2',
label: '标签2',
disabled: true
},
{
name: 'name3',
label: '标签3'
}
],
3.1、修改数组的值,比如将数组下标为2的值换成其它的
let arrList=[1,2,3,4,5]
//这样修改值的话会出现问题,由于 JavaScript 的限制, Vue 不能检测到数组的变动
arrList[2] = 9
//第一个是要修改的数组,第二个是要修改的数组下标,第三个值是你最终要替换成的值
Vue.set(arrLists, 2, '值')
Vue响应式添加、修改数组和对象的值
// 通过深度克隆来使数据真的改变,之前是没有改变的
tabList = JSON.parse(JSON.stringify(tabList))