vue+elementui子组件实时监听父组件数据变化在处理成无限循环问题

最新推荐文章于 2024-05-23 10:48:16 发布
最新推荐文章于 2024-05-23 10:48:16 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42484910/article/details/118679001
版权

前提：子组件实时监听父组件保存方法后返回的数据 （数组），并拿到其数据渲染子页面上（多组表单形式）

报错信息：You may have an infinite update loop in watcher with expression “financials1”

原因

：子组件中监听父组件传入的数据financials1 直接在this.getFiancialInfo()里处理 在其处理的过程中会使financials1里的值改变 从而又触发了监听 进入死循环

解决方法

1.在data定义一个存放父组件传给子组件数据的空数组
在这里插入图片描述
2.将监听的数据 赋值给定义的数组，this.getFiancialInfo()为处理数据并渲染在页面上的方法
在这里插入图片描述

一个写bug的人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现子组件监听父组件数据状态变化而变化
weixin_42833042的博客
07-29 1万+
一、使用背景 正常情况下，更多推荐的是利用vuex来进行父子组件间的状态变化监听，毕竟vue是支持单向数据流的，违背了这个特性，一是不好维护，二是耦合性降低了，但是否没有了vuex，子组件就难以主动根据父组件的变化而变化呢？这里探讨一下可行的办法，供大家思考。 二、实现原理 其实子组件往外传递数据，不外乎借用$emit的方法。试想像一个场景，比如说开发一个定时组件，出发的按钮在子组件上，需求是...
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
you may have an infinite update loop in watcher with expression
weixin_34307464的博客
03-07 7060
echarts中option的data传数组,千万不要对数组进行操作. 否则会出bug you may have an infinite update loop in watcher with expression 在带有表达式的观察程序中，可能有无限更新循环 为什么会出现这个bug呢? 分析如下: 错误的模式下:首先yKeyData在created生命周期中获取数据时也发生了变化,watch监听...
vue3中子组件监听父组件传来的实时数据变化
最新发布
qq_38210427的博客
05-23 844
【代码】vue3中子组件监听父组件传来的实时数据变化。
[Vue warn]: You may have an infinite update loop in watcher with express
qq_42103673的博客
06-28 7298
echarts中option的data传数组，千万不要对数组进行操作. 否则会出bug you may have an infinite update loop in watcher with expression 错误分析： 首先chartSource在created生命周期中获取数据时也发生了变化,watch监听到后,重新渲染图标执行option操作,结果option中的data中的数组进行倒置了, data: data.xAxis.reverse() 那么watch监听的chartSourc
(vue)Vue前台警告You may have an infinite update loop in watcher with expression
nyf_unknow的博客
08-16 3298
原因：循环的数组设置了全局（和我的特殊数组有关）
You may have an infinite update loop in watcher with expression “columns“
Node.js安装报错 - npm -v 查看版本无效
08-15 763
场景：iview 动态加载二级表头问题：中文含义：您可能在具有表达式“columns”的观察程序中有一个无限更新循环解决方法：方法1： 修改iview.js源码，亲测有效。（不建议）参考链接：https://blog.csdn.net/Qi_Si_Miao_Xiang/article/details/108826950方法2： 修改table组件代码。参考链接：https://blog.csdn.net/fanhailing/article/details/108465412。
vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip
03-09
在Vue.js框架中，Element UI库是一个非常流行的前端组件库，它提供了丰富的UI元素和交互设计，极大地简化了Web开发工作。在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的...
前端插件vue+elementui+axios
03-22
例如，Vue组件可以监听用户操作，触发Axios请求，获取服务器数据，然后通过Vue的响应式机制更新视图，Element UI组件会随之更新显示。这种配合让前端开发变得更加高效，也使得应用的用户体验得到提升。 总结起来，...
vue + elementUI实现省市县三级联动的方法示例
10-16
在Vue.js框架中，结合ElementUI库实现省市县三级联动是一项常见的需求，它允许用户在选择省份时自动更新城市选项，进一步选择城市时更新县/区选项。以下是如何使用Vue和ElementUI实现这一功能的详细步骤： 1. **...
VUE+elementui面包屑实现动态路由详解
10-16
在这个案例中，面包屑组件通过监听`$route`的改变，实时地获取当前路由的层次结构，并根据这个结构动态生成面包屑导航。 总结来说，Vue+Element UI实现动态路由面包屑的关键步骤包括： 1. 定义路由配置，包含路径...
解决iview多表头动态更改列元素发生的错误的方法
01-21
解决iview ‘You may have an infinite update loop in watcher with expression “columns”‘ 解决方案 单表头是可以动态变化不需要增添什么东西 多表头目前iview尚不能动态变化，会报错You may have an infinite update loop in watcher with expression columns解决方法是github大神提供的：需要修改iview.js源码 将iview.js中 columns: { handler: function handler() { var
【已解决】you may have an infinite update loop in watcher with expression “xxx“
程序边界
04-27 3060
不要在watch中对监听的值做修改操作，这个自不必多说，若是有deep: true去掉试试。。。水 简单记录，详细之后再补
vue2+elementUI 中监听对象属性值变化
寬真
02-11 1339
vue2+elementUI 中监听对象属性值变化
解决iview 'You may have an infinite update loop in watcher with expression "columns"'
weixin_34319640的博客
11-02 3572
为什么80%的码农都做不了架构师？>>> ...
vue3 在 watch 中调用接口方法时被频繁执行的问题
qq_44308944的博客
01-25 1111
在这个示例中，我们将延迟时间设置为 500 毫秒，也就是说，当 inputValue 的值变化后，会等待 500 毫秒后才执行回调函数，从而防止回调函数被频繁执行。这是因为 watch 默认会在监听值变化时立即执行回调函数，而当值变化频繁时，就会导致回调函数被多次执行。总之，如果你在 Vue 3 中遇到了在 watch 中调用接口方法时被频繁执行的问题，可以考虑使用 debounce 或 throttle 函数来限制回调函数的执行次数。这两个函数可以防止回调函数被频繁执行，从而降低接口的请求次数。
VUE+ELEMENT:表格渲染导致的 异常:You may have an infinite update loop in a component render function
weixin_39698872的博客
12-25 2551
场景: 做一个全文检索，检索到的记录显示到el-table表中，这本是一个简单的问题。后面要对检索的Key在记录中做高亮显示，遇到了这个异常。 百度一下，很吓人。可能有无限更新循环，这怎么行，听着这得耗多少客户端资源。 在做高亮展示时候，我是放到column中进行的 <el-table> <el-table-column> &...
Vue.js原理之vue响应式/怎样监听data变化
qq_26905813的博客
09-11 2241
Vue.js原理之vue响应式/怎样监听data变化
vue中怎么使用watch监听data中数据变化
weixin_35750483的博客
01-03 965
在 Vue 中，可以使用 watch 属性来监听数据的变化。 使用方法如下： new Vue({ data: { message: 'Hello' }, watch: { message: function (newValue, oldValue) { console.log('message changed from', oldValue, 'to', n...
后端返回给前端两个数组，第一个数组是标签页内容，第二个数组是侧边栏内容及侧边栏对应的页面内容，前端根据这两个数组，基于vue+elementui实现点击顶部标签栏，定位到对应侧边栏，点击侧边栏的某一项，显示对应的页面内容
05-19
好的，你可以这样实现： 1. 在Vue中，通过v-for指令循环渲染标签页和侧边栏内容，比如： ```html <!-- 标签页 --> <el-tabs v-model="activeTab"> <el-tab-pane v-for="(tab, index) in tabs" :label="tab.label" :name="index" :key="index"></el-tab-pane> </el-tabs> <!-- 侧边栏 --> <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect"> <el-submenu v-for="(menu, index) in menus" :index="index" :key="index"> <template slot="title">{{menu.title}}</template> <el-menu-item v-for="(subMenu, subIndex) in menu.subMenus" :index="`${index}-${subIndex}`" :key="`${index}-${subIndex}`">{{subMenu.title}}</el-menu-item> </el-submenu> </el-menu> ``` 2. 在Vue组件中，定义标签页和侧边栏的数据和方法，比如： ```javascript export default { data() { return { tabs: [ { label: '标签页1' }, { label: '标签页2' }, { label: '标签页3' } ], activeTab: '0', // 默认选中第一个标签页 menus: [ { title: '侧边栏1', subMenus: [ { title: '侧边栏1-1', content: '侧边栏1-1的内容' }, { title: '侧边栏1-2', content: '侧边栏1-2的内容' } ] }, { title: '侧边栏2', subMenus: [ { title: '侧边栏2-1', content: '侧边栏2-1的内容' }, { title: '侧边栏2-2', content: '侧边栏2-2的内容' } ] }, { title: '侧边栏3', subMenus: [ { title: '侧边栏3-1', content: '侧边栏3-1的内容' }, { title: '侧边栏3-2', content: '侧边栏3-2的内容' } ] } ], activeMenu: '0-0' // 默认选中第一个侧边栏 } }, methods: { handleMenuSelect(index) { // 处理侧边栏选中事件，获取选中菜单对应的内容 const [menuIndex, subMenuIndex] = index.split('-') const content = this.menus[menuIndex].subMenus[subMenuIndex].content // 根据选中的侧边栏内容，新建一个标签页 this.tabs.push({ label: index, content }) this.activeTab = `${this.tabs.length - 1}` } } } ``` 3. 在Vue组件中，通过监听标签页的切换事件，动态改变侧边栏和页面内容，比如： ```javascript export default { watch: { activeTab(newIndex, oldIndex) { // 标签页切换时，更新侧边栏和页面内容 const { content } = this.tabs[newIndex] if (content) { const [menuIndex, subMenuIndex] = this.activeMenu.split('-') const newContent = this.menus[menuIndex].subMenus[subMenuIndex].content if (newContent !== content) { this.tabs[newIndex].content = newContent } } } } } ``` 这样就可以实现点击顶部标签栏，定位到对应侧边栏，点击侧边栏的某一项，显示对应的页面内容了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值