vue 数组对象更新
一、概述
在使用数组的时候，数组内部数据发生改变，但是与数组绑定的页面的数据却没有发生变化。
示例代码如下：
<template>
<div style="margin-left: 10px;">
<div v-for="(item,index) in nameList">
<span>姓名: {{ item.name }}</span>
<span>年龄: {{ item.age }}</span>
</div>
<button @click="update_test()">更新第2个</button>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
nameList:[
{
id:"1",
name:"张三",
age:"18",
},
{
id:"2",
name:"李四",
age:"19",
},
{
id:"3",
name:"王五",
age:"20",
},
],
};
},
methods: {
update_test(){
this.nameList[1]={
id:"2",
name:"张小斐",
age:"21",
}
console.log("更新后list",this.nameList)
}
}
}
</script>
<style scoped>
</style>访问页面，点击按钮
1.png
发现，数据是更新了。但是页面没有变化。
注意：此时数据更新和另外2个，是有差异的，见上图。
二、解决办法
使用set方法
完整代码如下：
<template>
<div style="margin-left: 10px;">
<div v-for="(item,index) in nameList">
<span>姓名: {{ item.name }}</span>
<span>年龄: {{ item.age }}</span>
</div>
<button @click="update_test()">更新第2个</button>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
nameList:[
{
id:"1",
name:"张三",
age:"18",
},
{
id:"2",
name:"李四",
age:"19",
},
{
id:"3",
name:"王五",
age:"20",
},
],
};
},
methods: {
update_test(){
let index=1
let value={
id:"2",
name:"张小斐",
age:"21",
}
this.$set(this.nameList,index,value)
console.log("更新后list",this.nameList)
}
}
}
</script>
<style scoped>
</style>刷新页面，再次点击，发现生效了。效果如下：
1.png
本文参考链接：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-04-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录