vue 数组对象更新

发布时间：2021-04-08 09:27:05编辑：admin阅读（2960）

一、概述

在使用数组的时候，数组内部数据发生改变，但是与数组绑定的页面的数据却没有发生变化。

示例代码如下：

<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个，是有差异的，见上图。

 

二、解决办法

使用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>




 

刷新页面，再次点击，发现生效了。效果如下：



 

 

 

本文参考链接：

https://www.jb51.net/article/173906.htm

关键字：