vue动态属性不更新和You may have an infinite update loop in a component的解决方案

最新推荐文章于 2023-08-31 10:53:54 发布
最新推荐文章于 2023-08-31 10:53:54 发布
阅读量1k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40466351/article/details/123198299
版权
该博客主要介绍了在Vue组件中遇到的数据更新与视图渲染问题，以及可能出现的无限更新循环错误。作者通过示例代码展示了如何使用`$set`解决数据更新但视图未渲染的问题，并提供了处理无限更新循环的解决方案，即在数据处理完毕后再进行渲染，并添加了一个数据处理完成的标识`isFinished`。同时，博客还包含了具体的组件代码片段，用于展示如何在组件中正确管理和渲染数据。
摘要由CSDN通过智能技术生成

1、实现效果
在这里插入图片描述
需求:显示每种类型的每种错误类型的失败数据
问题1：数据更新了，但是视图不渲染
解决方案：使用$set

 this.$set(this.dataObj, prop, {});
        this.$set(this.dataObj[prop], "activeData", []);
        this.$set(this.dataObj[prop], "activeName", "");

        // this.dataObj[prop] = {};
        // this.dataObj[prop].activeData = [];
        // this.dataObj[prop].activeName = "";

问题2：
在这里插入图片描述
原因: 因为我在渲染的时候，又在改变值，所有就导致render - show改变 - render
You may have an infinite update loop in a component
译文：您可能在一个组件中有一个无限更新循环

报错解析 [Vue warn]: You may have an infinite update loop in a component render function.

解决方案：
先处理完数据结构，在渲染数据，添加数据处理完的标识isFinished
整个组件的代码

<template>
  <div class="mt30 exec-task-result-content" v-if="isFinished">
    <el-collapse v-model="collapseActiveNames">
      <el-collapse-item
        v-for="(item, i) in iotTaskResultList"
        :key="item.meterTypeName"
        :name="item.meterTypeName"
        :disabled="item.txFailNum == 0"
      >
        <template slot="title">
          <div class="align_items_center f15">
            <div class="align_items_center">
              <span>{{ item.meterTypeName }}:</span
              ><span class="bold danger-color f16">{{ item.txTotalNum }}</span>
            </div>
            <div class="ml10 align_items_center">
              <span class="">加入任务:</span
              ><span class="bold primary-color f16">{{
                item.txSuccessNum
              }}</span>
            </div>
            <div class="ml10 align_items_center">
              <span>加入失败:</span
              ><span class="bold warn-color f16">{{ item.txFailNum }}</span>
            </div>
          </div>
        </template>
        <div v-if="item.failReasonList.length">
          <el-tabs
            v-model="dataObj[i + ''].activeName"
            type="card"
            @tab-click="
              (tab) => {
                handleClick(tab.name, i);
              }
            "
          >
            <el-tab-pane
              :label="failTypeList[key] + '(' + value.length + ')'"
              :name="key"
              v-for="(value, key, index) in item.failFormateData"
              :key="index"
            >
            </el-tab-pane>
          </el-tabs>
          <!-- 表格 -->
          <div>
            <avue-crud
              :option="option"
              :data="dataObj[i + ''].activeData"
              ref="crud"
            >
            </avue-crud>
          </div>
          <!-- 表格 -->
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
//failType  失败类型 0 = 系统类 1 = 网络类 2 = 其他原
export default {
  props: {
    // iotTaskResultList: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   },
    // },
  },
  data() {
    return {
      list: [],
      collapseActiveNames: [],
      dataObj: {},
      isFinished:false,
      failTypeList: {
        0: "系统类",
        1: "网络类",
        2: "其他",
      },
      tabActiveName: "",
      option: {
        menu: false,
        maxHeight: 200,
        // calcHeight: 120,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        addBtn: false,
        viewBtn: true,
        selection: false,
        dialogClickModal: false,
        column: [
          {
            label: "姓名",
            prop: "userName",
          },
          {
            label: "地址",
            prop: "addrDes",
          },
          {
            label: "表类型",
            prop: "meterTypeName",
          },
          {
            label: "表号",
            prop: "meterGyh",
          },
          {
            label: "失败原因",
            prop: "failReason",
          },
        ],
      },
      iotTaskResultList: [
        {
          failReasonList: [
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "11111",
              meterGyh: "ee",
              meterTypeName: "33",
              userName: "ee",
              failType: 1,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "2222",
              meterGyh: "ee",
              meterTypeName: "33",
              userName: "ee",
              failType: 2,
            },
          ],
          isIot: 1,
          meterTypeName: "物联网表",
          txFailNum: 3,
          txSuccessNum: 0,
          txTotalNum: 0,
          txWaitNum: 0,
        },
        {
          failReasonList: [
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 1,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 1,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 1,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "000",
              meterGyh: "ee",
              meterTypeName: "0",
              userName: "ee",
              failType: 0,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "11111",
              meterGyh: "ee",
              meterTypeName: "33",
              userName: "ee",
              failType: 1,
            },
            {
              addrDes: "ee",
              addrName: "ee",
              failReason: "2222",
              meterGyh: "ee",
              meterTypeName: "33",
              userName: "ee",
              failType: 2,
            },
          ],
          isIot: 1,
          meterTypeName: "物联网dd表",
          txFailNum: 10,
          txSuccessNum: 0,
          txTotalNum: 0,
          txWaitNum: 0,
        },
      ],
    };
  },
  mounted() {
    this.getCollapseActiveNames();
    this.filterFailReasonList();
  },
  methods: {
    //展开所有
    getCollapseActiveNames() {
      let names = [];
      this.iotTaskResultList.forEach((item) => {
        if (item.txFailNum != 0) {
          names.push(item.meterTypeName);
        }
      });
      this.collapseActiveNames = names;
    },
    //获取每一个表格的第一个tab的表格数据值
    handleClick(name, index) {
      this.$set(
        this.dataObj[index + ""],
        "activeData",
        this.iotTaskResultList[index].failFormateData[name]
      );
      this.$set(this.dataObj[index + ""], "activeName", name);
   
    },
    filterFailReasonList() {
      this.iotTaskResultList.forEach((item, index) => {
        let prop = index + "";

        this.$set(this.dataObj, prop, {});
        this.$set(this.dataObj[prop], "activeData", []);
        this.$set(this.dataObj[prop], "activeName", "");

        if (item.failReasonList.length) {
          let failObj = {};
          let failReasonList = item.failReasonList;
          failReasonList.forEach((failItem) => {
            if (failObj.hasOwnProperty(failItem.failType)) {
              failObj[failItem.failType].push(failItem);
            } else {
              failObj[failItem.failType] = [failItem];
            }
          });
          item.failFormateData = failObj;
          //初始选择第一个参数\
         
          this.$set(this.dataObj[prop], "activeData", failObj[firstName]);
          this.$set(this.dataObj[prop], "activeName", firstName);
         
        }
      });
      this.isFinished = true;
      return this.iotTaskResultList;
    },
  },
};
</script>
八分钟de温暖
关注
Vue循环问题-[Vue warn]: You may have an infinite update loop in a component render function-解决-在线案例
JackieDYH的博客
04-28 4794
[Vue warn]: You may have an infinite update loop in a component render function.在组件呈现函数中可能有一个无限更新循环 在循环过程中，修改到了循环对象，从而引发了无限循环，此时vue会发出警告，但并没有真正产生死循环。 你的确导致了一个无限循环， 因为array.sort()改变了数组自身，导致了过滤器又一次被触发。确保在副本上对数组排序： return value.slice().sort(...) 分析 ...
若依分离版、vue报错：[Vue warn]: You may have an infinite update loop in a component render function.
weixin_46953697的博客
03-22 2330
问题描述： 页面运行正常，但刷新页面或新增文档后页面一直加载，后台报错： [Vue warn]: You may have an infinite update loop in a component render function. 根据网上查询的结果原因基本如下： 在for循环中我使用了函数，页面刷新或新增文档时间接修改了循环响应数据而且没有终止条。页面执行渲染时，又会改变状态，于是又渲染，迟迟不能生成真实节点，所以界面一直在转圈。 原代码： 数据： data() { return { //附件
vue项目中出现 You may have an infinite update loop in a component render function
yyycsdnyyy的博客
04-20 927
文章目录一、第一次调试二、第二次调试本人结论 这个bug的意思是组件渲染函数中可能有无限更新循环。 一、第一次调试 在vue所渲染的界面元素当中，如果用方法或者计算属性对 vm.$data 的属性进行操作，理论上，可能因为修改到循环对象，诱发无限循环，此时 Vue 就会发出警告。 如 ：本人第一次的情况是在v-for中循环使用了tbody函数显示界面元素。 tibody: function (item) { var x = '789'; console.lo
【javascript】[Vue warn]: You may have an infinite update loop in a component render function.
weixin_30808693的博客
09-20 648
今天遇到一个问题，因为数据来源不是同一个数组，但是想使用连续的index。 简化了一下，代码长下面这样，实际上第一眼看是没有问题的。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset...
vue - vue使用sort排序时报死循环错误:you may have an infinite update loop in a component render function
qq_43886365的博客
03-19 916
vue使用sort排序时报死循环错误:you may have an infinite update loop in a component render function
报错 You may have an infinite update loop in a component render function.
n_j_q的博客
08-31 1774
You may have an infinite update loop in a component render function.
You may have an infinite update loop in a component render function.
热门推荐
潇湘子的博客
08-12 2万+
问题：You may have an infinite update loop in a component render function. 在组件渲染函数中你可能有一个无限更新的循环 这就导致页面一直在加载无限循环下去，没有终止，卡死 在vue的data方法中： data() { // 定义响应式变量 isExecuteFlag: false } <el-table-column prop="" label="操作" width="190" align="center"> &
vue You may have an infinite update loop in a component render function报错
Cooky的博客
02-19 1247
如标题所示，是在使用ant design vue的表格组件时引起的错误，报错信息如下 首先，这个表格是在一个v-for的a-tab组件内的a-table 看错误信息表示无限更新的循环 后来发现，渲染表格内容时，调用了一个计算方法返回要显示的内容，错误在于，在计算方法内，又改变了data数据的值，在更新渲染的时候又修改数据，又回导致更新，于是就死循环了 简略错误代码如下 <a-tabs v-...
Vue infinite update loop的问题解决
12-01
在Vue.js中，"You may have an infinite update loop in a component render function" 是一个常见的警告，这通常发生在组件渲染函数内部触发了不必要的无限更新循环。这种情况通常与计算属性（computed properties...
You may have an infinite update loop in a component render function.组件渲染函数中可能有一个无限更新循环。
Y2835742027的博客
12-06 3298
You may have an infinite update loop in a component render function.
[Vue warn]: You may have an infinite update loop in a component render function
qq_45796592的博客
05-12 8447
解决bug的方法
You may have an infinite update loop in a component
weixin_33932129的博客
09-13 562
今天写着写着，突然发现控制台里有错误： [Vue warn]: You may have an infinite update loop in a component render function 这个问题很奇怪，之前从来没有遇到过。如果是我自己主导的项目，倒也好办，慢慢 debug 就是；偏偏在公司的项目里遇到这个问题，而公司项目的体...
报错You may have an infinite update loop in a component render function.
DyuanH的博客
04-26 994
今天遇到一个vue的报错 You may have an infinite update loop in a component render function. 出现问题的代码 select_toString(select){ if(select.length){ return select.sort().join('') }else{ return '空' } } bug的问题...
You may have an infinite update loop in a component render function.问题解决
小巧r的博客
07-02 2426
问题： 在构造出来的tabledata对象数组进行渲染表格时再次使用这个对象数组的数据进行其他操作，造成双向绑定过程中的无限循环。 解决过程 在查询相关类似问题时，找到了灵感，正因为vue是数据的双向绑定渲染页面，在形成表格数据的同时，我为了使第一行的按钮隐藏，又对第一行数据进行判断处理，所以导致循环得到表格数据时又同时调用方法处理这些数据，进而无限循环下去。 解决方案 直接删除与渲染表格数据同时进行时的其他处理函数，用v-show处理第一行数据的显示隐藏。 ...
vue使用sort排序时报死循环错误:you may have an infinite update loop in a component render function
越是安静内敛的人，越容易生不惊人死不休
04-20 1246
vue - vue使用sort排序时报死循环错误:you may have an infinite update loop in a component render function
you may have an infinite update loop in a component render function.
changyana的博客
05-09 643
产生的原因：在组件的 render 函数中有一个无限更新循环。当 Vue.js 组件的 render 函数触发一次更新后，又立即导致另一次更新时，就会出现这种情况。，所以这就会导致更新的立即触发，就会出现报错。
You may have an infinite update loop in a component render function
LD喂！的博客
03-08 200
You may have an infinite update loop in a component render function 今天写项目遇到一个很奇怪的问题,我确定我没有写死循环但是控制台打印了这个错误,查了半天大概明白了是怎么回事,在这里记录下. 我在使用v-for时调用了filter方法,在filter方法中对数据进行了.sort()排序,错误就在这里,v-for不允许对数据进行操作,排序可能也包含在内吧,所以在排序前需要进行一次复制 arr.sort()改为arr.slice().sort(
vue中You may have an infinite update loop in a component render function.
最新发布
08-23
在Vue.js中，"infinite update loop"是指当组件的渲染函数（render function）陷入了一个无法终止的循环更新过程中。这种情况通常发生在以下几个场景： 1. **数据依赖循环**：如果你的数据结构或者计算结果形成了一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值