vue中使用v-if判断数组长度是出现length报错

  • 在vue中使用v-if判断数组的长度时出现报错
<el-collapse-item :key="index"  v-if="data.childrens.length > 0" :title="data.fname" :name="data.fname">
    <el-row>
        <el-col :md="24" :lg="12" :xl="8" v-for="item in data.childrens" :key="item.directoryID"><div :class="treeFlag === item ? 'treeHover' : ''" @click="treeClick(data.fname, item.fname, item.directoryID)">{{ item.fname }}</div></el-col>
    </el-row>
</el-collapse-item>

报错如下

  • 出现这个问题的原因是在判断数组长度的时候没有进行数组是否存在的判定

所以在v-if中需要添加判断数组存在，如下图

原文地址：https://www.cnblogs.com/Yancyzheng/p/11909916.html

时间： 2024-10-07 12:12:30

vue中使用v-if判断数组长度是出现length报错的相关文章

php中count获取多维数组长度的方法

本文实例讲述了php中count获取多维数组长度的实现方法.分享给大家供大家参考.具体分析如下: 先来看看下面程序运行结果: $numb=array(             array(10,15,30),array(10,15,30),array(10,15,30) ); echo count($numb,1); A.3B.12C.6D.9答案是Bcount函数中如果mode被设置为 COUNT_RECURSIVE(或 1),则会递归底计算多维数组中的数组的元素个数(也就是你结果的12).如

0131 JavaScript数组中新增元素：修改数组索引、修改 length 长度、数组翻转

? 数组中可以通过以下方式在数组的末尾插入新元素: 数组[ 数组.length ] = 新数据; 1.5.1 通过修改 length 长度新增数组元素 可以通过修改 length 长度来实现数组扩容的目的 length 属性是可读写的 var arr = ['red', 'green', 'blue', 'pink']; arr.length = 7; console.log(arr); console.log(arr[4]); // undefined console.log(arr[5]);

ajax的data传递数组时，前台不报错，后台不进断点

ajax的data中传递数组数据时,需加traditional:true, //默认false 不添加会导致后台接收不到改参数,后台controller中的方法不会执行,前后台都没有报错 $.ajax({ type:'post', async:false, url:'/emergencyPlanDigital/addPointAssociation', data:{ superId:$('#pointId').val(), childrenIds:childrenIds }, dataType:

Vue 中的 v - if 和 v - show + v-for

v-if   v-show v-if是动态的向DOM树内添加或者删除DOM元素: v-if和v-show 都可以控制显示隐藏 v-if 它是没有加载DOM结构 可以叫做惰性加载 <div id="app"><h1 v-if='true'>{{msg1}}</h1> <span>显示</span> <br><h1 v-if='false'>{{msg2}}</h1> <span>不

项目中遇到的问题-2：编译第三方静态库报错、查看静态库的类型、绘制圆形

这一周比较折腾,由于项目应用涉及到和其他产品线APP的互相通信,在高层领导英(yi)明(ta)神(hu)武(tu)的战略指导下,我开始了与其他组同事的联调之旅.这几天鄙司负责产品的上级同事莅临监工,对现在的情况又提出了一些改进,作为一名程序猿,我已经奉上我的双膝... 一.集成公司其他组的.a静态库,报错:duplicate symbole for architectecture i386 XXX  查了一下报错的地方,都是指示.a的库和工程里面某些.m文件冲突,正好同事提到之前有碰到过这种情况

hive中创建子表并插入数据过程初始化MR报错解决方法

本文继成上一篇通过hive分析nginx日志文章,详情参考下面链接: http://www.cnblogs.com/wcwen1990/p/7066230.html 接着来: 创建业务子表: drop table if exists chavin.nginx_access_log_comm; create table if not exists chavin.nginx_access_log_comm( host STRING, time STRING, request STRING, refe

VS项目中使用Nuget还原包后编译生产还一直报错？

Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的,但是其他朋友加个一个项目,我获取最新后,编译始终报错,说是这个项目缺少Nuget包引用,可是我在编译时明明已经还原了该项目引用的nuget包,同时也手动就行了nuget的包还原都不行,百思不得其解.报错如下: 报错信息说是:本计算机上面缺少此项目Seagull2.YuanXin.WebApi引用的

在android 中开发java.net.SocketException: socket failed: EACCES (Permission denied) 报错

在android中下载文件,写好下载文件的代码后需要配置相应的权限 <uses-permission android:name="android.permission.INTERNET"/><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 按原则来说这样就应该可以正常下载了,但是在android4.2 模拟器上运行(貌似4.0以上的模拟器都有

MySQL中查询时&quot;Lost connection to MySQL server during query&quot;报错的解决方案

一.问题描述: mysql数据库查询时,遇到下面的报错信息: 二.原因分析: dw_user 表数据量比较大,直接查询速度慢,容易"卡死",导致数据库自动连接超时.... 三.解决办法: 方案1.在mysql配置文件[myslqd]下面添加一行设置skip-name-resolve.需要重启mysql服务. 方案2.在hosts文件内添加: ip与主机名的映射关系[这种方式不用重启] 如: 在hosts文件中添加: 127.0.0.1 localhost 其他网上的方法: 1. 代码层