vue2、vue3基于js给后端接口返回的数据（如以json数据为元素的数组）添加新的json字段

vue2、vue3基于js给后端接口返回的数据（如以json数据为元素的数组）添加新的json字段

1、 res为后端接口的响应

res.data.data.list = [
	{
		id:"1",
		name:"Lily"
	},
	{
		id:"2",
		name:"Lucy"
	},
]

2、 获取后端接口返回的数据

this.tableData = res.data.data.list;

3、 vue2 向数组中添加一个元素，在{}对象中添加一个字段（属性）

1. vue2 向 tableData 添加字段

1.1. 向 tableData 中添加一个新json元素( {“time”, “2023-02-09”} )

this.$set(this.tableData,'time','2023-02-09')

1.2. tableData 添加新元素后 tableData 的值

this.tableData = [
	{
		id:"1",
		name:"Lily"
	},
	{
		id:"2",
		name:"Lucy"
	},
	{
		time: "2023-02-09",
	},
]

2. vue2 向 tableData 的元素添加字段

2.1. 向 tableData 中的每个元素添加一个新json元素( {“age”, “20”+i} )

for(let i=0; i<this.tableData.length; i++) {
	this.$set(this.tableData[i],'age','20'+i)
}

2.2. 向 tableData 中的每个元素添加一个新json元素后tableData 的数据

this.tableData = [
	{
		id:"1",
		name:"Lily",
		age:"21"
	},
	{
		id:"2",
		name:"Lucy",
		age:"22"
	},
	{
		time: "2023-02-09",
		age:"23"
	},
]

4、 vue3 向数组中添加一个元素，在{}对象中添加一个字段（属性）

1. vue3 向 tableData 添加字段

1.1. 向 tableData 中添加一个新json元素( {“time”, “2023-02-09”} )

// 添加
// 在数组的索引位置1的前面（即索引位置0的后面）添加一个元素
this.tableData.value.splice(1, 0, {"time", "2023-02-09"});

// 替换：
// 将数组的索引2位置的元素替换为 {"phone", "12345678901"}
this.tableData.value.splice(2, 1, {"phone", "12345678901"});

1.2. tableData 添加新元素和替换元素后 tableData 的值

this.tableData = [
	{
		id:"1",
		name:"Lily"
	},
	{
		time: "2023-02-09",
	},
	{
		phone: "12345678901",
	},
]

2. vue3 向 tableData 的元素添加字段

2.1. 向 tableData 中的每个元素添加一个新json元素( {“age”, “20”+i} )

for(let i=0; i<this.tableData.length; i++) {
	this.tableData[i].age = "20"+i;
}

2.2. 向 tableData 中的每个元素添加一个新json元素后tableData 的数据

this.tableData = [
	{
		id:"1",
		name:"Lily",
		age:"21"
	},
	{
		time: "2023-02-09",,
		age:"21"
	},
	{
		phone: "12345678901",,
		age:"21"
	},
]

学习：Web 开发技术