解决vue更新对象数组时，视图不更新以及更新错误问题

最新推荐文章于 2024-01-15 21:13:57 发布

qq_24800489

最新推荐文章于 2024-01-15 21:13:57 发布

阅读量4.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue工作问题文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_24800489/article/details/90108269

vue工作问题专栏收录该内容

2 篇文章

订阅专栏

本文分享了在使用Vue框架时，处理下拉框数据更新遇到的问题及解决方案。作者详细介绍了如何避免数据更新引起的索引错误，通过直接修改数组元素属性而非替换整个对象，确保数据更新的同时索引保持不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近因为工作需求原因一直使用VUE框架，作为时下最热门的渐进式框架，开发起来确实非常给力~
当然一个好的工具也不可能完全对你百依百顺，最近在工作中就遇到了一个问题，经过一下午的奋战终于搞定了，秉承着本熊一贯的无私奉献的原则，也为了向诸位同行一同探讨，特地临时搭了一个架子来演示解决过程，如果有更好方式欢迎指正：
大致需求是这样的：
当我点击类型下拉框时，要同步更新这行的数据：
在这里插入图片描述
嗯~感觉so easy!
一阵悦耳的：啪！啪！啪！啪…（是敲键盘啦~）
大致思路就是：
1、获取选中的类型值和对应的数据索引；
2、根据类型值去数据中找到对应的数据；
3、再根据索引将数据赋值给数组的指定位置
代码如下

methods: {
    selectionType(val, index) {
      var selectItem = {};
      this.tableData.forEach((item, index) => {
        if (item.type == val) {
          selectItem = item;
        }
      });
      this.tableData[index] = selectItem;
    }
  }

接下来我们看效果：
1、首先选择一个类型，点击：
在这里插入图片描述
2、查看效果，发现前三项数据正常更新了，当然只点一下怎么能满足我

3、然后就…筐瓢了。

但是没关系，遇到问题搞定就是了，然后查了下官方文档：

说得是呢~

立马开始实践：

//   this.tableData[index] = selectItem;
     this.$set(this.tableData, index, selectItem);

。。。。
在这里插入图片描述
经过一番研究，发现居然是因为索引问题：
1、为了获取当前数据的所在的索引，手动在生命周期中添加了index属性，以便于操作项能判断当前数据是否需要继续上移还是下移按钮；
2、虽然当替换完数组项后，重新调用了更新数组索引方法，但貌似这个并没有生效；
在这里插入图片描述
ok既然知道问题所在了，我们需要的是当点击下拉选项后，只更新数据，索引不变即可

//   this.tableData[index] = selectItem;
//   this.$set(this.tableData, index, selectItem);

this.tableData[index].type = selectItem.type;
this.tableData[index].name = selectItem.name;
this.tableData[index].tip = selectItem.tip;
this.tableData[index].required = selectItem.required;
      
this.tableData = upload(this.tableData);

再点点看
(1)
在这里插入图片描述
(2)

完美~~~
当然如果真的要一个个赋值未免太二了，所以最终代码如下：

methods: {
    selectionType(val, index) {
      var selectItem = {};
      var newTableData = [];

      this.tableData.forEach((item, index) => {
        delete item.index;
        if (item.type == val) {
          selectItem = item;
        }
      });
      this.tableData[index] = selectItem;

      // JSON.parse(JSON.stringify(this.dataA));
      // 解决data的数据给了newTableData变量，改变newTableData的值，data对象也变化的
      newTableData = JSON.parse(JSON.stringify(this.tableData));
      this.tableData = upload(newTableData);
    }
  }

如果有更好的方法欢迎批评指正
在这里插入图片描述