解决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 同时使用会报错的文章就介绍到这了,更多相关v-if 与 v-for 使用报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决v-for中使用v-if或者v-bind:class失效的问题

    在v-for循环出来的列表中使用v-bing动态绑定class.v-show或v-if动态控制个别item 场景一般多用于多项选择 原因是在v-for循环的时候 items是动态创建,所以不会被监听并且实时动态控制class 解决方法是 vm.$set 官方文档中有介绍 我的解决方法使用了框架自带多选按钮,将样式呈现出来 但仅仅是样式呈现,在循环items的时候,给它新增属性isSelect 然后在点击选择的时候,动态设置isSelect属性 在提交的时候去循环判断该list每一项的isSele

  • vue的注意规范之v-if 与 v-for 一起使用教程

    当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中 所以,不推荐v-if和v-for同时使用 使用推荐方式: <ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> <ul v-if="shouldSh

  • vue2和vue3的v-if与v-for优先级对比学习

    Vue.js 中使用最多的两个指令就是 v-if 和 v-for ,因此我们可能会想要同时使用它们.虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式: 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时, v-for 会优先作用. 在 vue 3.x 中, v-if 总是优先于 v-for 生效. 对比学习 接下来我们通过一个简单的示例来感知下,假设我们想要实现一个极简的 todoList 效果: 我们有一个 todoList: const todoL

  • 解决java执行cmd命令调用ffmpeg报错Concat error - No such filter '[0,0]'问题

    最近公司有一个公交项目,要生成报站语音,采用的是 报站前缀 + 站点名 + 报站后缀,3个MP3文件拼接的方式,拼接成一个完整的语音,且需要转码率和比特率,使用到了ffmpeg. 去网上找了一些ffmpeg相关的命令,参考: 安装命令参考 音频转码: ffmpeg -i **.mp3 -ar 8000 -ac 2 -y -b:a 32k -vol 400 **.mp3 音频拼接: //音频拼接 (1) ffmpeg -i "concat:test4.mp3|180_out.mp3" -

  • 解决在for循环中remove list报错越界的问题

    解决在for循环中remove list报错越界的问题

    最近在搞一个购物车的功能,里面有一个批量删除的操作,采用的是ExpandableListView以及BaseExpandableListAdapter.视乎跟本篇无关紧要,主要是为了记录一个java基础.迭代器iterator的使用 一.错误代码(主要就是购物车的批量删除) /** * 删除选中的 */ public void delSelect() { int groupSize; if (mGropBeens != null) { groupSize = mGropBeens.size();

  • 解决Python中字符串和数字拼接报错的方法

    解决Python中字符串和数字拼接报错的方法

    前言 众所周知Python不像JS或者PHP这种弱类型语言里在字符串连接时会自动转换类型,如果直接将字符串和数字拼接会直接报错. 如以下的代码: # coding=utf8 str = '你的分数是:' num = 82 text = str+num+'分 | 琼台博客' print text 执行结果 直接报错:TypeError: cannot concatenate 'str' and 'int' objects 解决这个方法只有提前把num转换为字符串类型,可以使用bytes函数把int

  • 解决安装python库时windows error5 报错的问题

    python安装库时,有时候会报错windows error 5,可以尝试关闭所有使用python的编辑器.文件等,然后重新pip安装,如果还是不行,可以将报错最下层文件删除即可(如果不放心可以将该文件先备份),记录之~ windows error错误代码: windows error错误代码: 0操作成功完成. 1功能错误. 2系统找不到指定的文件. 3系统找不到指定的路径. 4系统无法打开文件. 5拒绝访问. 6句柄无效. 7存储控制块被损坏. 8存储空间不足,无法处理此命令. 9存储控制块

  • 解决laravel5.4下的group by报错的问题

    使用ORM查询数据显示这个错,这是因为laravel使用了开启了mysql的严格模式所以 如果要关闭的话,我们需要找到config/database.php这个文件,然后将 mysql下的这个改为false;就会关闭. 既然说严格模式那什么是样模式呢.据我所知在mysql在5.7有一个尿性 [报错:only_full_group_by],就是你group by的数据里面必须包含你查询的数据,意思就是如果你的sql是:select name,age from user group by name;

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • 解决idea导入ssm项目启动tomcat报错404的问题

    用idea写ssm项目,基于之前一直在用spring boot 对于idea如何运行ssm花费了一番功夫 启动Tom act一直在报404 我搜了网上各种解决办法都不行,花费一天多的时间解决不了 就是在pom中添加下面代码 <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin<

  • 解决angularjs service中依赖注入$scope报错的问题

    控制台错误提示 ionic.bundle.js:26794 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- DutylogService http://errors.angularjs.org/1.5.3/$injector/unpr?p0=<ion-nav-view name="tab-dutylog" class="view-container tab-conte

  • 解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题

    错误描述: 1.保存模型:model.save_weights('./model.h5') 2.脚本重启 3.加载模型:model.load_weights('./model.h5') 4.模型报错:ValueError: You are trying to load a weight file containing 12 layers into a model with 0 layers. 问题分析: 模型创建后还没有编译,一般是在模型加载前调用model.build(input_shape)

  • 解决vue项目运行npm run serve报错的问题

    先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 :%SystemRoot%\system32;一定要注意分号, 然后在path环境中配置C:\Windows\System32 最后去项目安装依赖 npm i 运行项目 npm run serve 如果这样子项目还是报同样的错误,那么就把node全局卸载,去控制面板卸载,然后安装,最后安装依赖,运行项目就可以成功了 补充知识:vue

随机推荐