在使用v-if判断一个数组大小为0时,会出现 length 是undefined的错误:
[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

错误代码:

<group v-if="item.detailEntityList.length===0" style="margin-top:-22px;">
<div style="text-align:center;font-size:14px;padding:10px 0;color:#f76260;">
暂无信息
</div>
</group>

  

造成这个错误的原因是因为,没有预先判断数组是否存在,需要先对数组进行非空验证:item.detailEntityList!=undefined

修正代码:

<group v-if="item.detailEntityList!=undefined && item.detailEntityList.length==0" style="margin-top:-22px;">
<div style="text-align:center;font-size:14px;padding:10px 0;color:#f76260;">
暂无信息
</div>
</group>

  

vue v-if:"TypeError: Cannot read property 'length' of undefined"的更多相关文章

  1. vue报错TypeError: Cannot read property 'protocol' of undefined

    错误信息如下所示: isURLSameOrigin.js?3934:57 Uncaught (in promise) TypeError: Cannot read property 'protocol ...

  2. easyui Datagrid查询报错Uncaught TypeError:Cannot read property 'length' of undefined

    1.问题描述 easyui中datagrid执行loadData方法出现如下异常:Cannot read property 'length' of undefined 2.一开始怀疑是js或者页面的问 ...

  3. vue TypeError: Cannot read property 'length' of undefined 问题解决思路

    上图中是我在接手一个项目的时候,出现的一个关于数组的 bug,但是从上图来看,其实报错是不清楚的,只能从报错信息上看出来是 /src/page/waybill/waybill_form.vue 这个 ...

  4. laydate 日期格式为yyyy 或yyyy-MM时,出现错误Uncaught TypeError: Cannot read property 'length' of undefined

    这个改起比较麻烦,没有深究,简单兼容了yyyy 和yyyy-MM,其他格式可能还是会有错误.替换Dates.check方法. //检测日期是否合法 Dates.check = function(){ ...

  5. vue报错TypeError: Cannot read property '$createElement' of undefined

    报错截图: 这个错误就是路由上的component写成了components

  6. easyUI Uncaught TypeError: Cannot read property 'length' of undefined

    dataGrid json 封装数据格式为 List<Object> 格式

  7. TypeError: Cannot read property 'compilation' of undefined

    Vue build失败 TypeError: Cannot read property 'compilation' of undefined 1.   使用npm run build 失败 使用npm ...

  8. TypeError: Cannot read property 'length' of null

    本文为博主原创,未经允许不得转载: 异常展示: [Vue warn]: Error in getter for watcher "filterAndSortData": " ...

  9. vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined

    我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...

随机推荐

  1. git使用:本地分支merge到远程分支

    背景:为了更加规范维护自动化测试工程,代码提交流程最近更新了,先拉分支到本地修改,完成后同步到远程分支. 前置条件 (1)本地机器可通过ssh与gitlab服务器通信 (2)gitlab上的测试项目中 ...

  2. 【Linux】Set CentOS no GUI default

    [root@localhost ~]#vi /etc/inittab 重点看下面这部分代码 #   0 - halt (Do NOT set initdefault to this)          ...

  3. Error: Cannot find module 'webpack/schemas/WebpackOptions.json' 问题解决

    webpack 和  webpack-dev-server的版本问题,需要版本配套才行.现在webpack最新版本是4.16.1了,最新的webpack应该有WebpackOptions.json文件 ...

  4. 分享一个不错的Unittest测试报告

    分享一个不错的,unittest测试报告. 先上图: 代码如下: 复制下来保存成py可用 #coding=utf-8 """ A TestRunner for use w ...

  5. Spring Boot入门 and Spring Boot与ActiveMQ整合

    1.Spring Boot入门 1.1什么是Spring Boot Spring 诞生时是 Java 企业版(Java Enterprise Edition,JEE,也称 J2EE)的轻量级代替品.无 ...

  6. 2017 6 2php用PDO链接数据库前测试

    try { $dsn = "mysql:dbname=test;host=127.0.0.1";//链接mysql的DSN(数据库驱动) $user = 'root';//Mysq ...

  7. 【数据结构】算法 LinkList (Remove Nth Node From End of List)

    删除链表中倒数第n个节点 时间复杂度要控制在O(n)Solution:设置2个指针,一个用于确定删除节点的位置,一个用于计算倒数间距n.移动时保持2个指针同时移动. public ListNode r ...

  8. x509证书相关内容

    什么是证书 X.509证书,其核心是根据RFC 5280编码或数字签名的数字文档.    实际上,术语X.509证书通常指的是IETF的PKIX证书和X.509 v3证书标准的CRL 文件,即如RFC ...

  9. Qt QML 2D shader

    --------------------------------------------------- Qt quick 2d shader effect ---------------------- ...

  10. ajax的网上解析

    /* 用XMLHTTPRequest来进行ajax异步数据交交互*/ 主要有几个步骤: //1.创建XMLHTTPRequest对象 //最复杂的一步 if (window.XMLHttpReques ...