Vue 之 v-for 组件渲染不出来

最新推荐文章于 2024-04-23 16:51:15 发布
最新推荐文章于 2024-04-23 16:51:15 发布
阅读量2.9k 收藏 1
点赞数 3
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43174759/article/details/105677725
版权

今天遇到一个很奇怪的问题，就是使用v-for的时候代码逻辑都是对的，但是就是v-for渲染不出来

<text-card :title="$t('accountContract.conAuthScope')" :border="true">
                <div v-if="ScopeofAuthorization.length > 0">
                    <div v-for="item in ScopeofAuthorization" :key="item.id" :gutter="40">
                        <el-col v-if="item.scopeOfAuthorizationRelRightInfoVos.length > 0" :span="24">
                            <text-cell :label=
最低0.47元/天 解锁文章
蛙。
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue - v-for 循环渲染多个 “重复“ 子组件（仅 ref 不同，this.$refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立“ 的！详细教程
王佳斌
02-21 5691
vue 组件ref 怎么是变量，vue 组件的refs如何绑定变量，循环数组v-for中使用refs，Vue 父组件循环使用refs调用子组件方法，Vue ref 和 v-for 结合，vue 循环动态设置ref并获取$refs方式，vue中 $ref的使用(v-for组件内使用ref)，vue循环渲染子组件，vue如何让组件的ref变成动态的，vue怎么将循环体内插入子组件，vue把组件ref设为动态,然后用refs再找到，vue 动态赋值ref，vue同一个子组件循环出来如何使用，vue将子组件设置动态
关于vue中v-for绑定数据重新渲染的问题
本郡主是喵
08-18 1077
set 是 Vue 提供的一个全局方法，用于向响应式对象中添加或更新属性，并触发视图更新。它接受三个参数：对象、要添加/更新的属性名或索引，以及新的值。(他虽然这样说,但是我直接修改数组和对象元素，是能够重新渲染的，但是v-for渲染数据不可以。我修改被v-for绑定的数据，发现居然不能重新渲染。
vue:v-if v-for条件列表渲染详解
zxcve的博客
06-20 3205
vue基础条件渲染解析
Vue的列表渲染和双向绑定（初学vue之v-for以及v-model）
百赢出品，必属精品
04-23 1718
列表渲染是指将数据集合（通常是数组）中的每个数据项渲染成相应的 DOM 元素，通常用于显示列表、表格等内容。双向绑定是指视图（DOM）与数据模型之间的双向关联，当数据模型发生变化时，视图会更新；反之亦然，当用户在视图中输入内容时，数据模型会相应地更新。
vue学习，v-for不渲染
weixin_44736274的博客
04-09 1395
最近在学习vue，使用axios+v-for做个搜索天气的小练习，发现只有第一次搜索有数据，改变数组后vue-for不渲染，但使用console.log可以看到数据确实更新了。 使用this.$forceUpdate();这个不起作用，没办法了，只好在js里面写了一个清空数组的办法，解决了问题。 var app = new Vue({ el: "#app", data: { ...
Vue用v-for重渲染
灵魂画师牧码
08-07 4094
当v-for循环的数据被修改时，我发现没有重新渲染，我的代码如下：<div id="app"> <ul class="list-group"> <li v-for="(list, index) in lists" class="list"> {{list.title}} </li> </ul> </div>var app = n
vue组件模板使用v-for无法渲染的问题
qq_41756580的博客
09-29 5992
最近在做项目的过程中遇到一个问题，我们创建自己的组件时，父组件传给子组件一个数组，子组件使用v-for指令无法渲染，以下是错误代码： Vue.component('component-test',{ props: { testData: { type: Array, default: [] } }, templat...
Vue列表渲染(v-for的使用)
见证自己学习,成长的记录
03-28 2876
v-for指令1.用于展示列表数据2 语法 v-for=(item,index) in(of) xxx :key=“yyy”3 可遍历：数组(用的多)，对象(用的多)，字符串(用的少)，指定次数(用的少)代码奉上DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 初始vue < / title >
解决：vue项目中使用v-for列表渲染不显示问题
shushukaka的博客
01-05 9743
在vue中不管是动态滚轮、下拉框都会用到v-for，但我们经常遇到一个问题，明明数组和HTML结构都没有问题，但是列表就是不显示。 你是否有这个习惯就是在data中会先自定义一个空数组用来装xhr请求后端过来的数组 然后数据请求过来后 然后v-for,但是页面是空的。 解决：在上套一个父级然后做判断 原因：由于定义的weatherData数组初始值为空数组，xhr请求是异步的，所以要做判断。 ...
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
- 由于 `v-for` 比 `v-if` 优先级高，即使 `v-if` 为 `false`，`v-for` 还是会遍历数据，只是不渲染结果。因此，如果数据量很大，应优先考虑通过计算属性或外部 `v-if` 过滤数据。 总之，理解 `v-if` 和 `v-for` ...
详解vuejs之v-for列表渲染
10-19
总结，Vue.js的`v-for`指令为列表渲染提供了强大且灵活的解决方案。它使得动态生成和管理DOM变得简单，同时充分利用了Vue.js的响应式数据绑定机制。通过熟练掌握`v-for`，开发者能够更高效地构建数据驱动的Web界面。...
使用vue的v-for生成table并给table加上序号的实例代码
08-29
使用 Vue 的 v-for 生成 Table 并给 Table 加上序号的实例代码 在本文中，我们将主要介绍使用 Vue 的 v-for 生成 Table 并给 Table 加上序号的相关知识点。首先，我们需要了解 Vue 的 v-for 指令，该指令用于遍历...
vue 使用v-for进行循环的实例代码详解
10-15
- 在 Vue 2.2.x 及更高版本中，如果在自定义组件上使用 `v-for`，`key` 是必须的，这是为了优化 Vue 的渲染过程。 总之，Vue 的 `v-for` 指令是实现数据循环展示的核心功能之一。它允许开发者轻松地遍历数组和对象...
解决vue组件中使用v-for出现告警问题及v for指令介绍
08-28
解决 Vue 组件中使用 v-for 告警问题及 v-for 指令介绍 在 Vue 组件中使用 v-for 指令时，经常会出现告警问题，这篇文章将为大家介绍解决该问题的方法，并详细介绍 v-for 指令的使用。 解决 Vue 组件中使用 v-for ...
蓝桥杯单片机竞赛-超声波测量显示
08-04
博客地址：https://blog.csdn.net/weikangcekong/article/details/140906931?spm=1001.2014.3001.5501
高等教育计算机网络基本知识
08-04
高等教育计算机网络基本知识
shapely-2.0.5-cp310-cp310-macosx_11_0_arm64.whl
最新发布
08-04
shapely-2.0.5-cp310-cp310-macosx_11_0_arm64.whl
红外传感器在 障碍物探测应用 中的抗干扰 问题摘自配件手册.pdf
08-04
红外传感器在 障碍物探测应用 中的抗干扰 问题摘自配件手册.pdf
vue中v-for用不了
09-08
在Vue中，v-for是一个用于循环渲染元素的指令。根据你提供的引用内容，有几种情况下v-for可能无法使用。 根据引用，v-for在Vue中需要在一个包含循环的元素上使用，而不是在根元素上使用。也就是说，v-for需要在一个具有唯一根元素的template标签内进行使用。例如： ``` <template> <div> <ul id="example-1"> <li v-for="item in items">{{ item.message }}</li> </ul> </div> </template> ``` 此外，根据引用，在定义组件的template时，在li外层包裹一个标签可以让v-for在li上进行循环。例如： ``` Vue.component("todo-list", { props: ['todo'], template: ` <ol> <div v-for="item in todo"> <li>{{ item.text }}</li> </div> </ol> ` }) ``` 最后，根据引用，v-for在Vue中是用来循环渲染组件的。你需要给每个组件提供一个唯一的"key"属性，以便Vue能够正确地跟踪和更新每个组件。例如： ``` <template> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol> </template> ``` 在这个例子中，todo-item组件被循环渲染，并且每个组件都有一个唯一的"key"属性。 综上所述，如果在Vue中无法使用v-for，请确保它是在一个包含循环的元素上使用，并根据需要包裹外层标签或提供唯一的"key"属性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值