在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化。
示例代码如下:
<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>
访问页面,点击按钮
发现,数据是更新了。但是页面没有变化。
注意:此时数据更新和另外2个,是有差异的,见上图。
完整代码如下:
<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>
刷新页面,再次点击,发现生效了。效果如下:
本文参考链接: