v-for循环数据中无数据时，循环不进行，这时就需要单独渲染代码

最新推荐文章于 2023-12-04 14:14:35 发布
最新推荐文章于 2023-12-04 14:14:35 发布
阅读量1.8k 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianxiao_a/article/details/106279687
版权

我用v-for循环一个maillist的时候发现一个问题，当点击触发事件时，list中如果没有数据的话，循环是不会执行的，循环中的代码也无法执行，这里如果想要执行一个事件的话就要对某个控件进行单独渲染

这是渲染之前的代码

点击发件后无反应，循环内代码没执行
在这里插入图片描述

这是渲染后的代码 将要操作的控件复制一份到循环外

加一个v-if判断就可以了
在这里插入图片描述

💜再小的帆也要远航

Ymeip_
关注
专栏目录
Vue3 - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，ref.value.xx 使用时依然能准确找到子组件并调用其方法）将子组件 ref 设为动态，这样每个子组件都是独立的实例！
王佳斌
12-11 4143
vue3，vue3动态refs，vue3组件如何让ref是动态的并且能调用对应方法，vue3给动态渲染的组件添加ref，vue3自定义组件的ref变成动态后如何调用，vue3组件ref怎么是变量，vue3组件的refs如何绑定变量，循环数组v-for中使用refs，Vue3父组件循环使用refs调用子组件方法，Vue3 ref和v-for结合，vue3循环动态设置ref并获取ref.value方式，vue3中ref的使用(v-for组件内使用ref)，vue3循环渲染子组件，vue3如何让组件的ref变成动
html 列表循环 el,element-ui的navMenu使用v-for循环渲染不同子标签(el-menu-item和el-submenu)...
weixin_42442958的博客
06-16 2179
简单记录1.简介2.上代码2.1html代码2.1.1原理2.2 js代码3.树型组件实现4.结语1.简介作为一个合格的全栈开发者，前端的常用技术肯定不能落下。在深度了解了原生HTML5、CSS3和JavaScript(ES5和ES6)之后，前端的三大马车(Vue、React、Angular)至少要会一个吧，国内使用Vue比较多，Vue是一个轻量级的框架，组件化和MVVM的思想的应用使得Vue在性...
vue掉坑之旅(1) —— v-for 指令渲染数据失效
oooooomit 博客
05-24 6933
一、v-for指令 1. v-for 作用 对数组进行遍历，通过特殊语法，对列表、表格或下拉框渲染数据； Tips：类似foreach、for的作用，语法跟foreach类似 2. v-for 语法 根据官方教程，我们可以看到： 二、我是怎么掉坑的 1. 情景     在前台我拿到了后台返回的数据，想要对其表格进行渲染； 2. 为什么坑？     通过 Chrome 开发工具，能够清楚的看到数据的返回以及相应变量接收是没问题
v-for 为空时如何显示提示
weixin_42612405的博客
01-23 556
当 v-for 数组为空时, 可以在指令后面加上一个 v-else 指令来显示提示信息。 例如： <template> <div> <div v-for="item in items" :key="item.id">{{ item.name }}</div> <div v-else>暂无数据</div> ...
Vue3使用axios请求数据后使用v-for显示不出数据
qq_17586383的博客
12-19 1858
Vue3使用axios请求数据后使用v-for显示不出数据
vue结合jquery做ajax时页面绑定v-for时无法显示数据
ForestCat的专栏
12-01 824
页面代码如下: <ul id="example-1"> <li v-for="pic in sites"> <dt>{{ pic.path }}</dt> <dl>{{pic.id}}</dl> <dl>{{pic.description}}</dl> </li> </ul> vu
vue配合django接口，v-for循环的时候显示不了数据
9527
08-14 1937
vue配合django接口 v-for循环的时候显示不了数据
vue2.0 可折叠列表 v-for循环展示的实例
10-18
在这个实例中，我们将探讨如何使用`v-for`循环来遍历数据并展示列表，以及如何通过点击事件控制列表的展开和折叠。下面我们将详细分析这个实例中的关键点。 1. **`v-for`循环**： `v-for`是Vue中的一个指令，用于...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
12-29
先看看ElementUI里关于el-table的template数据结构： xss=removed> label=日期 width=180> label=姓名 width=180> <el-table-
Vue 之 v-for 组件渲染不出来
v-model绑定对象检测不到属性变化？
04-22 3060
在Vue实际项目开发中，相信大家都有使用到v-for，但是在使用v-for的同时，对于像我这样的前端小白来说，还是有一些坑需要慢慢爬。
使用v-for双层循环数据时,第二层数组不显示数据
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
03-14 3801
vue里面循环数据一般使用v-for命令，但是循环一层的时候没啥问题，数据可以正常显示出来，但是循环两层时，有时候第二层数组里面的数据不显示，然后去百度了下，发现有兄弟也碰到了这种情况，并且给出了解决的办法，推荐使用 this.$forceUpdate() 这是vue里面的强制更新数据的方法，效果非常好，嘿嘿 其实moldslist（第二层数组）这个字段，是我在本地新加的字段，也就是说，不是接口返回的， 想要给每一条数据都加上这个字段，使用for循环呗，然后直接就var了，自然就报错了，系统提示我
v-for循环数组变量时，没有正常显示值(报错记录5)(mongodb)
qq_38313984的博客
07-14 1056
在v-for="item in provinces" 循环数组变量要获取所有省名时，发现循环出来的数组数量不对，并且省名(item.province_name)没有显示 查看provinces赋值的地方，发现this显示为undefined，以为是this赋值的问题 但是，将this的不变量赋值给另外一个变量是显示有值，所以this在这里显示undefined对赋值没有影响 观察变量a的值，值并不是想要的数组 去查看获取mongodb数据库数据的代码，之前是复制上课老师的代码没有发现..
v-for渲染数据丢失
weixin_44744234的博客
04-25 363
为提升性能，v-for在更新已渲染过的列表时，会采用 " 就地复用 " 的策略，但这个策略会在某时造成数据混乱，如：在列表前面新增内容或删除时(若在列表最后新增，则无影响)一般都是使用元素的index值，但是这样有时候会导致渲染丢失数据，最好使用元素的id，这样基本不会出现问题。我们一般使用key值来解决，这样每一个都是独一无二的；
Vue 中 v-for 不能遍历数据？
雨声学java
03-28 3058
Vue 中 v-for 不能遍历数据？ v-for 参数顺序介绍
在vue中使用axios请求数据 v-for渲染数据的时候结构没有出来的问题
后端麻酱的博客
12-09 1479
在vue中使用axios请求数据 v-for渲染数据的时候结构没有出来的问题 1.问题说明 在使用axios向后台请求数据时，根据后台接口返回的数据，res.data.data 返回的是一个数组对象，并且将这个数组对象赋值给了在data定义的一个空数组，打印这个空数组，是真实存在的数据 res.data.data 使用v-for循环结构的时候，数据并没有出来 以上都是常规操作，但是渲染的结构并没有出来 2.问题截图说明 2.0.1 axios部分 没什么问题 正常打印 2.0.2 v-for部分 2
v-for循环空数组返回undefined
szbszb1的博客
10-03 4587
本文章采用 1.1版本的vue.js和 2.6版本的vue.js进行解决该问题 1.1版本的vue.js 1.1版本的vue.js不存在v-for循环空数组或空对象返回undefined的问题 且该版本的vue.js还可以使用$index,$key HTML代码 <div id="box"> <ul> <li v-for="item in myData">{{item}}{{$index}}</li> </ul>
vue v-for空列表 显示undefined的问题
sanlyshi's front-end road
11-02 6993
https://blog.csdn.net/tearsknow/article/details/78411672
VUE使用this.$forceUpdate()解决v-for渲染的数据初始值为空时属性值赋值后页面数据未改变的问题
vvv3171071的博客
01-20 2251
业务场景： 渲染一个这样框框的数据，html代码如下： 其中meters数组是有初始数据的，而statusData初始是个空对象： 在该情况下，页面DOM肯定是在我请求到statusData数据之前就已渲染完成了，而在我拿到statusData后，页面上的数据也未产生变化。 statusData内容： 楼主首先想到的是用$set代替直接赋值，然而马上发现了问题：我statusData原本就是个空数组，没有初始属性，要怎么用$set呢？ 那就得在使用$set前给对象一个默认值，在data里给statu
v-for循环空数组异常渲染排查解决【uniapp,微信小程序,vue】
General_D的博客
12-04 2014
列表异常显示空行，但部分正常，怀疑是渲染问题。通过源码我们得知渲染使用了v-for，咱们分为两种情况进行排查,那就先排除一个最简单的，是否存在换行符；其次排除是否存在异常渲染的情况，如渲染了看不见，渲染了空元素。
如何使用Vue的v-for指令实现外层循环控制内层循环的次数，即每次外层循环执行执行一次内层循环？
最新发布
10-25
在Vue.js中，`v-for`指令通常用于数据驱动的列表渲染，通过设置外层循环和内层循环，你可以动态地生成嵌套结构。如果你想要每次外层循环执行就执行一次内层循环，可以这样做： ```html <template> <div v-for="outerItem in outerArray"> <!-- 这里开始一个新的内层循环，它会基于每个outerItem的某个属性值运行 --> <div v-for="(innerItem, innerIndex) in outerItem.innerArray"> <!-- 内部的内容 --> {{ innerItem }} </div> <!-- 内层循环结束后，继续下一个外层循环 --> </div> </template> <script> export default { data() { return { outerArray: [ { innerArray: [1, 2, 3] }, { innerArray: [4, 5, 6] }, // 更多的外层项... ] }; } }; </script> ``` 在这个例子中，`outerArray`是一个包含对象数组的变量，每个对象都有名为`innerArray`的属性。`v-for`会遍历`outerArray`的每一项，并对每一项的`innerArray`进行单独的迭代。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值