工作214:结构 vue操作一个很有意思的报错 [Vue warn]: You may have an infinite update loop in a component
结构
vue操作一个很有意思的报错
[Vue warn]: You may have an infinite update loop in a component render function.
代码:
<template><span class="show-filters" :class="show = !show">{{ show ? '隐藏过滤器 ↑' :'显示过滤器 ↓' }}</span>
</template><script> export default {data() {return {show: true}}};</script>
分析
NOTE: render method is triggered whenever any state changes
即任何时候vue实例状态的改变都会触发渲染方法的执行
- 组件初始化时,将数据属性show值为true
- 当渲染方法执行,内联表达式
show = !show
改变了状态 - 响应状态show改变,重新执行render方法,企图生成新的VNode节点(以便生成真实节点插入页面)
- 于是产生的局面会无尽循环这样:render - show改变 - render 重复执行步骤2-3-2
v-for
<div v-for="item in model.items" v-bind:class="test(item.result)">
{{item.id}}
</div>
data() {return {accept: false,not_accept: false,};
},
methods: {test(result) {if (result == 'accept') {this.accept = true;this.not_accept = false;} else if (result == 'Not accept') {this.accept = false;this.not_accept = true;} else {console.log(result);}return {success: this.accept,danger: this.not_accept,};},
},
解决方案
methods: {test(result) {let accept;if (result == 'accept') {accept = true;} else if (result == 'Not accept') {accept = false;} else {console.log(result);}return {success: accept,danger: !accept,};},
}
小结
工作214:结构 vue操作一个很有意思的报错 [Vue warn]: You may have an infinite update loop in a component相关推荐
- VUE+ELEMENT:表格渲染导致的 异常:You may have an infinite update loop in a component render function
场景: 做一个全文检索,检索到的记录显示到el-table表中,这本是一个简单的问题.后面要对检索的Key在记录中做高亮显示,遇到了这个异常. 百度一下,很吓人.可能有无限更新循环,这怎么行,听着这得 ...
- [Vue warn]: You may have an infinite update loop in watcher with express
echarts中option的data传数组,千万不要对数组进行操作. 否则会出bug you may have an infinite update loop in watcher with exp ...
- 一个很有意思的问题: 揭示了计算机程序问题的一般处理思路
2019独角兽企业重金招聘Python工程师标准>>> 一个很有意思的问题: 揭示了计算机程序问题的一般处理思路 === 问题标题: 如何统计汉字的字数? 问题内容: 我想统计: & ...
- 现如今有一个很有意思的现象,不管是工厂还是经销商
现如今有一个很有意思的现象,不管是工厂还是经销商,生意不好的时候,很多人都是想着通过降价来解决问题,但结果却是没什么用. 这其实算是个坏毛病,第一次便宜的时候,也许还能够出点量.因为在我们传统的思维里 ...
- VUE router 导航重复点击报错的问题解决两种方案
VUE router 导航重复点击报错的问题解决两种方案 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家 ...
- Vue框架Vue-cli脚手架引入图片报错
Vue框架Vue-cli脚手架引入图片报错 一.import导入图片方法 第一步:在.vue文件中import edit from 'path'(path是图片与.vue的相对路径) 第二步:在dat ...
- vue创建脚手架时常见的报错
我们在创建脚手架结构时,会出现很多的报错:为此我搜集了一些常见的报错: 1. error Mixed spaces and tabs no-mixed-spaces-and-tabs 这个报错代表缩进 ...
- vue引入第三方js的方案 报错
vue引入第三方js的方案 报错< 问题描述 vue项目中引用一个外部js包 npm中没有响应的js下载 所以只能通过外部引用 使用方法如下: 1.首先是第三方js包存放的位置 一定要放在 st ...
- vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析 从给出的提示可以看出 ...
最新文章
- 2021年大数据Flink(十九):案例一 基于时间的滚动和滑动窗口
- Deep Web爬虫
- 我们从那里来—NG子宫日记 Womb
- 夺命雷公狗---linux NO:17 linux系统查找
- 第十周项目实践 哈夫曼树的建立哈夫曼编码
- python 第一行输入n表示一天中有多少人买水果_Python编程:从入门到实践——【作业】——第五章作业...
- Gin使用mongo进行增删改查/聚合/数据转换
- 福州大学软件1715|W班-助教卞倩虹个人简介
- Sharepoint2007个人网站不能同步域信息的处理方法
- C#中IEnumerableT.Select()、SelectMany()的简单使用
- Chrome浏览器快速获取静态控件的XPATH
- 阿里云银行关键业务破冰 邢台银行首家
- c# 字符串编码问题
- 彻底卸载Solidworks及Electrical以避免重新安装时出现1603、注册表权限错误或Installer未按预期运行
- 用c++编写的植物大战僵尸
- win oracle卸载工具,[转]oracle windows 之完美卸载
- android原生TTS+语音引擎 实现纯离线 免费的中英TTS
- 上网的时候总是掉线?该如何处理
- Function的含义
- 国科大抢课避坑+选课指南+教务系统操作
热门文章
- 为什么印度盛产码农_印度农产品价格的时间序列分析
- Java调用存储过程出现Bug,sql语法错误
- day01_初识python
- maven的profile详解
- 9th week blog
- 【JAVA基础】一:聊聊笔试常见到的 “==、equal” 比较是否相等的内在差别
- linux core无权限,linux – 为什么编辑core_pattern受限制?
- ik分词和jieba分词哪个好_Pubseg:一种单双字串的BiLSTM中文分词工具
- java 线程工厂_Java并发编程:Java的四种线程池的使用,以及自定义线程工厂
- wordpress去掉自带的logo或者左侧栏的菜单方法