v-if 与 v-for 同时使用会报错
在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错。
报错代码如下:
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 8}"
v-for="Oitem in Object.keys(cItem)"
:key="Oitem"
v-if="Oitem !== 'title'"
v-model="cItem[Oitem]">
</el-input>
提示错误:The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'
原因:v-for 的优先级比 v-if 的高,所以每次渲染时都会先循环再进条件判断,而又因为 v-if 会根据条件为 true 或 false来决定渲染与否的,所以如果将 v-if 和 v-for一起使用时会特别消耗性能,如果有语法检查,则会报语法的错误。
1. 将 v-for 放在外层嵌套 template (页面渲染不生成 DOM节点) ,然后在内部进行 v-if 判断
<template v-for="Oitem in Object.keys(cItem)">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 8}"
:key="Oitem"
v-if="Oitem !== 'title'"
v-model="cItem[Oitem]">
</el-input>
</template>
注意点:key值写在包裹的元素中
2. 如果条件出现在循环内部,不得不放在一起,可通过计算属性computed 提前过滤掉那些不需要显示的项
<template>
<div>
<div v-for="(user,index) in activeUsers" :key="user.index" >{{ user.name }}</div>
</div>
</template>
<script>
export default {
name:'A',
data () {
return {
users: [{name: 'aaa',isShow: true}, {name: 'bbb',isShow: false}]
};
},
computed: {//通过计算属性过滤掉列表中不需要显示的项目
activeUsers: function () {
return this.users.filter(function (user) {
return user.isShow;//返回isShow=true的项,添加到activeUsers数组
})
}
}
};
</script>
v-if 与 v-for 同时使用会报错的更多相关文章
- selenium下打开Chrome报错解决
错误如下: [22516:20196:0704/024642.979:ERROR:install_util.cc(597)] Unable to read registry value HKLM\SO ...
- appium运行报错.<init>(Lorg/openqa/selenium/remote/ErrorCodes;Z)V
最近这几天就在学习appium,搭建环境就耗费了很多时间,不得不承认自己够笨的了,然后我把环境搭建好,写完脚本的时候,就报这个错了,当时是从某个群里直接下载的demo,不得不吐槽说,够坑的,是能跑通, ...
- npm -v;报错 cannot find module "wrapp"
1.node -v正常.npm-v就报错.. 说明:在官网上下载了安装了好几次.一用到npm就报这个错.园友们,我不太懂node,你们遇到这个问题怎么解决的? 2.报错 cannot find mod ...
- iOS报错:linker command failed with exit code 1 (use -v to see invocation) 问题解决方式之一
百度库原版本:3.2.1 更新为:4.2.0,两个库相隔2年时间: 问题i: 更新CocoaPods的同时更新了百度地图库的版本,运行程序报错: linker command failed with ...
- PL/SQL 报错:动态执行表不可访问,本会话的自动统计被禁止。 在执行菜单里你可以禁止统计,或在v$session,v$sesstat 和vSstatname表里获得选择权限。
现象: 第一次用PL/SQL Developer连接数据库,若用sys用户登录并操作则正常,若用普通用户比如haishu登录并创建一个表则报错“动态执行表不可访问,本会话的自动统计被禁止.在执行菜单里 ...
- springboot与springcloud版本不对应导致报错java.lang.NoSuchMethodError: org.springframework.boot.builder.SpringApplicationBuilder.<init>([Ljava/lang/Object;)V
springboot启动报错: 10:31:50.221 [main] ERROR org.springframework.boot.SpringApplication - Application r ...
- npm -v 报错:Error: EPERM: operation not permitted, mkdir 'C:\soft\nodejs'
npm -v 报错:Error: EPERM: operation not permitted, mkdir 'C:\soft\nodejs' 起因:原本安装node在C盘soft文件夹下,按node ...
- iOS 报错: linker command failed with exit code 1 (use -v to see invocation) 原因
在iOS开发中,很多人会遇到这样的报错 linker command failed with exit code 1 (use -v to see invocation) 可能的原因如下: 1.引用出 ...
- Java发送邮件报错:com.sun.mail.util.LineOutputStream.<init>(Ljava/io/OutputStream;Z)V
在练习使用Java程序发送邮件的代码 运行出现了com.sun.mail.util.LineOutputStream.<init>(Ljava/io/OutputStream;Z)V报错信 ...
随机推荐
- nginx加大缓存
http { server { listen 0.0.0.0:81; server_name localhost; -- proxy_buffer_size 128k; proxy_buffers 3 ...
- python中函数isinstance()用来判断某个实例是否属于某个类
1 print(isinstance(1,int)) # 运行结果 True 2 # 判断1是否为整数类的实例 3 print(isinstance(1,str)) # 运行结果 False4 # 判 ...
- 【转】可见性、原子性和有序性问题:并发编程Bug的源头
如果你细心观察的话,你会发现,不管是哪一门编程语言,并发类的知识都是在高级篇里.换句话说,这块知识点其实对于程序员来说,是比较进阶的知识.我自己这么多年学习过来,也确实觉得并发是比较难的,因为它会涉及 ...
- k8s中prometheus监控k8s外mysql
k8s外安装mysql https://www.cnblogs.com/uncleyong/p/10739530.html 配置MySQL Exporter采集MySQL监控数据 创建yaml文件:v ...
- 攻防世界MISC进阶之签到题
攻防世界MISC进阶之签到题 第一步:分析 第二步:实操 第三步:答案第一步:分析难度系数:1星题目来源: SSCTF-2017题目描述:SSCTF线上选举美男大赛开始了,泰迪拿着他 ...
- RFC2899广播吞吐量测试——网络测试仪实操
一.简介 RFC 2889为LAN交换设备的基准测试提供了方法学,它将RFC 2544中为网络互联设备基准测试所定义的方法学扩展到了交换设备,提供了交换机转发性能(Forwarding Perform ...
- Linux性能优化实战CPU篇之软中断(三)
一.软中断 1,中断的定义 a>定义 举例:你点了一份外卖,在无法获知外卖进度的情况下,配送员送外卖是不等人的,到了发现没人取会直接走,所以你只能苦苦等着,时不时去门口看送到没有,无法干别的事情 ...
- C# 题目
题目 http://blog.zhaojie.me/2011/03/my-interview-questions-for-dotnet-programmers.html 1.考察对常量和自读字段 初始 ...
- Git学习笔记(详细)、idea集成
目录 概述 安装 常用命令 总结 idea使用git idea使用github Gitee GitLab Git使用git rebase 修改提交历史中的作者及邮箱信息 概述 官网:https://g ...
- linux 解决磁盘占用100%
df -h 查看磁盘使用情况 ll -h 查看文件的大小 使用如下命令查找大于100M的大文件,发现有几个日志文件及临时文件比较大,使用rm –rf删除即可. find / -size +10 ...