work-notes(9):vue 如何在 v-if 里面对数组的长度进行判断?为什么 v-if 里面判断数组长度 length报错?

news/2024/7/10 1:57:28 标签: js, vue, javascript

时间:2022-04-22

文章目录

    • 1、原因解释
    • 2、错误写法
      • 2.1 报错
    • 3、正确方式
      • 3.1 判空
      • 3.2 判非空

1、原因解释

首先数组长度为 0 的时候可能会报错,因为数组可能存在有 undefined 的状况;

所以写的判断条件尽可能的全一点;

2、错误写法

javascript"> <div v-if="arr.length > 0"> </div>

2.1 报错

javascript">Error in render: "TypeError: Cannot read property 'length' of undefined"

3、正确方式

在相应的 v-if 判断中添加判断。arr !== undefined

3.1 判空

javascript"> <div v-if="arr === undefined || arr.length === 0"> </div>

3.2 判非空

javascript"> <div v-if="arr !== undefined && arr.length > 0"> </div>

http://www.niftyadmin.cn/n/1410340.html

相关文章

work-note(10):父子传值时,父组件不会自动更新(刷新)展示出子组件,子组件创建成功,但是需要手动刷新才能展示子组件

时间&#xff1a;2022-05-15 文章目录问题描述问题分析解决方式1、首先确定传入的值2、监听这个传入的值&#xff08;重点&#xff09;监听写法&#xff1a;整体代码&#xff1a;附加问题描述 刚刚开始做项目&#xff0c;没有多少工作经验&#xff0c;好不容易查做了父子组件传…

work-notes(11):从父组件传入到子组件的值存在有多种类型时怎么写,怎么写传入值才正确?

时间&#xff1a;2022-05-15 文章目录问题描述正确写法重点问题描述 &#xff08;1&#xff09;当父组件传到 子组件的值&#xff0c;有多个的时候时怎么写才正确&#xff1f;好比说&#xff0c;我给一个子组件盒子&#xff0c;我传入的值可能是一个数字&#xff08;Number&am…

work-notes(12):如何二次封装 Element UI 的 dialog 弹窗,发现弹窗只能点击触发一次是什么原因,如何解决弹窗只能触发一次的问题?

时间&#xff1a;2022-05-15 文章目录问题描述问题分析1、如何二次封装 element UI 的 dialog 弹窗&#xff1f;2、实现过程&#xff08;1&#xff09;在 script 标签 中 props 传入值&#xff08;2&#xff09;绑定到 dialog 标签内主要结构&#xff1a;个人例子&#xff1a;解…

work-notes(13):如何去掉 el-select 的边框?为什么border:none; 去不掉el-select 的边框?去掉 bo-shadow

时间&#xff1a;2022-05-23 文章目录问题描述解决办法用法1、全局写法2、局部写法问题描述 前些天一个功能需要用到 el-select&#xff0c;但是不用透明的边框&#xff1b;给了 border:none; 却不生效&#xff1b;大概是这样&#xff1a;解决办法 1、首先要去掉 border&…

work-notes(14):路由跳转如何传值,VUE3.0 路由如何携带参数传值?

时间&#xff1a;2022-05-23 文章目录问题描述解决思路路由跳转如何携带参数&#xff08;1&#xff09;VUE2.0 方式1、router-link 方式2、this.$router.push() 方式3、获取参数方式&#xff08;2&#xff09;VUE3.0 方式解析1&#xff09;引入路由2&#xff09;使用3&#xff…

work-notes(15):私服报错401,Sonatype Nexus Repository Manager,may not contain non-url-safe chars如何解决?

时间&#xff1a;2022-05-30 文章目录问题描述回归重点&#xff0c;code 401 认证失败问题如何解决1、找到node本地文件 .npmrc2、删除里面的地址和 token3、重新登录4、总结问题描述 报错&#xff1a; code 401 npm ERR! Unable to authenticate, need: BASIC realm"Son…

work-notes(16):elementUI 的时间选择器如何添加选择时间格式,例如选择今天起往后7、15、30天

时间&#xff1a;2022-06-15 文章目录问题描述如何解决1、首先去 elementUI 复制他们的组件2、时间格式获取注意&#xff1a;问题描述 需求大致如下&#xff1a;可根据点击左侧的时间&#xff0c;把时间带入 今天起 至 往后的多少天&#xff1b;如何解决 1、首先去 elementUI…

work-notes(17):vue2 表格 prop 数据绑定的是一个动态添加的值,发现刷新时出不来,但是表格点击其他页面或表格大小变化的时候就能出来

时间&#xff1a;2022-06-16 文章目录问题描述图文描述&#xff1a;原因解析解决办法1、把给原本 .属性 方式改成 vue.set()解释实现效果问题描述 今天做一个功能&#xff0c;就是把数据渲染到表格上&#xff0c;但是发现有问题&#xff0c;直接刷新的时候出不来&#xff0c;但…