专栏首页python3vue 数组对象更新

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>

访问页面,点击按钮

发现,数据是更新了。但是页面没有变化。

注意:此时数据更新和另外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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue列表渲染(数组和对象)

    我们知道这个vue是mvvm模型,数据改变,视图层就改变但是通过实例改变app.list[3]="新设置",发现数据改变了视图层无法改变,那么如何保持数据和视图...

    十月梦想
  • vue数组更新界面无变化

    老梁
  • java对象数组 创建对象数组,初始化对象数组

    对象数组的概念: 如果一个数组中的元素是对象类型,则称该数组为对象数组。 当需要一个类的多个对象时,应该用该类的对象数组来表示,通过改变下标值就可以访问到不同的...

    用户7886150
  • Vue实现对数组、对象的深拷贝、复制

    当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下 数组:...

    庞小明
  • Js给数组对象新增属性

    明知山
  • 数组(更新...)

    在学习语言时,我们都会遇到数组.大学期间学过C,C++,Java,C#.这些语言中都学了数组,那时候用的不多,概念比较模糊,现在又学了php,里面也有数组,就打...

    仇诺伊
  • VUE开发–获取DOM对象和组件对象(十九)

    kirin
  • JavaScript数组对象

    万能操作 数组.splice(开始位置,数量,操作),操作后原数组的内容改变第一个参数是指定从几号位置开始删除或添加  第二个参数是指定删除几个元素

    十月梦想
  • JavaScript|数组对象

    讲到数组会有人问,什么是数组?数组就是有序数据的集合,在JavaScript中的数组元素允许属于不同的数据类型,用数组名和下标就可以唯一地确定数组中的元素。接下...

    算法与编程之美

扫码关注云+社区

领取腾讯云代金券