vue 数组对象更新

客官°小女子只卖身不卖艺 2022-10-22 02:52 194阅读 0赞

# 一、概述 #

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

示例代码如下：

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

访问页面，点击按钮

![7b505936491e9038b8aab19613e6a35b.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>

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

![a908f97f97358133948d41619774b6e5.png][]

本文参考链接：

[https://www.jb51.net/article/173906.htm][https_www.jb51.net_article_173906.htm]

[7b505936491e9038b8aab19613e6a35b.png]: /images/20221022/25e865f92f864d54ac54fafb1bd75645.png
[a908f97f97358133948d41619774b6e5.png]: /images/20221022/a105d907fefd47988aad8224fe26b5f9.png
[https_www.jb51.net_article_173906.htm]: https://www.jb51.net/article/173906.htm