单标签与双标签在使用v-for渲染数据时遇到的问题

最新推荐文章于 2023-03-02 17:23:26 发布
最新推荐文章于 2023-03-02 17:23:26 发布
阅读量388 收藏
点赞数
分类专栏： 【问题解决】 文章标签： html 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyuqing0414/article/details/127071336
版权

一、问题描述

这是data中的数据源，目标是使用v-for将下面的name属性对应的值渲染到页面上去：

首先尝试的是使用单标签input，此时item取到的是对象｛id:xxx,name:'xxxx'｝

结果是报错：

但是当换成一个双标签的时候，这时候正常显示：

最低0.47元/天 解锁文章
LESSLEMON
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-for循环空数组异常渲染排查解决【uniapp,微信小程序,vue】
General_D的博客
12-04 1826
列表异常显示空行，但部分正常，怀疑是渲染问题。通过源码我们得知渲染使用了v-for，咱们分为两种情况进行排查,那就先排除一个最简单的，是否存在换行符；其次排除是否存在异常渲染的情况，如渲染了看不见，渲染了空元素。
v-for后item.arr无法读取第二层数据
ikedaelaiza的博客
10-12 288
v-for后item.arr无法读取第二层数据
【Vue】零基础学习Vue: 第16课 Vue的v-for遍历生成标签指令：
06-29 716
遍历数组： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vu...
vue双向绑定标签v-model
menghuannvxia的专栏
08-01 411
vue双向绑定标签v-model
v3+ts慢慢学习之路四【v-for和它当中的key】
qq_42514643的博客
06-09 2105
v-for中的key使用
用v-html解决Vue.js渲染中html标签不被解析的问题
01-19
最近在工作中遇到一个问题，在网页中后台传来的json数据中包含html标签，将该json数据绑定到Vue.js中对象中，对该对象进行for循环，发现数据中的html标签不能被解析，而是当作字符显示出来。 问题如下所示： 解决...
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue.js应用中，`v-for`循环常用于渲染列表数据。然而，在处理图片加载时，尤其是在图片路径与数据动态绑定的情况下，可能会遇到一些问题。本文将深入探讨如何解决Vue的`v-for`循环中图片加载路径的问题。 首先，...
19.（vue3.x+vite）v-if和v-for哪个优先级更高.rar
最新发布
09-21
在Vue.js框架中，`v-if`和`v-for`都是重要的指令，它们各自负责不同的功能，但在实际应用中，可能会遇到它们同时出现在一个元素上，这就涉及到它们的优先级问题。Vue3.x引入了一些改进，包括对`v-if`和`v-for`的处理...
对vue中v-if的常见使用方法详解
10-17
`v-if` 提供了比使用CSS `display:none` 或 `visibility:hidden` 更好的性能优化，因为它会确保在条件为假时完全不编译和渲染相关元素。这对于处理大量数据或复杂逻辑的条件渲染尤其有用。 6. **与`v-show`的区别*...
解决vue页面渲染但dom没渲染的操作
10-15
如果在组件中遇到渲染问题，检查是否有适当的`props`传递或在`watch`属性中监听数据变化。同时，确保在`updated`或`created`钩子中进行数据依赖的操作。 5. **ECharts动态数据渲染**： 当在Vue中使用ECharts时，...
使用v-for循环时无法识别index
XUMINGRUNDEJIE的博客
03-13 1512
Vue脚手架创建项目遇到的问题：控制台报错：在使用v-for循环时无法识别index 解决方案：v-for="(item, index) in data" :key=“index” :index=“String(index)”
Vue3 + ts 笔记
gu2022_3_5_21_23的博客
12-23 625
1.解决直接赋值导致 proxy代理对象失去响应式。
v-for渲染列表key值报错
SlothSid的博客
05-13 448
What： 报错Avoid using non-primitive value as key, use string/number value instead. Why： 在for循环中，key值可能重复或者写错了 How： 检查Vue开发者工具 发现新增item的key值被定义为对象了，去找新增item的代码 发现是插件nanoid用法错误 这才是正确的。 ...
v-for循环遍历生成div，解决取不到值的问题
Huagg24的博客
03-02 1312
今天用v-for取后端拿到的tree时发现怎么都不显示【index】也加了。调整完还是不行，最后发现是v-for写法有问题，取data中的值ZhiNan。我查了之后说是没加index导致的，因为dom文档还没生成 所以取不到值。v-for取data中的值不需要加this. 真的很无语。
前端Vue循环渲染列表v-for奇数行或者偶数行加样式两种方法动态绑定class
m0_49714202的博客
01-28 4982
直接复制页面查看想要的效果 <template> <div> <!-- %前端代表 取余数 --> <ul> <!-- (用哪个注释掉哪个，list-item这是原始样式，若使用奇数，则设置的是偶数行样式，反之亦然) --> <li class="list-item" v-for="(item, index) in list"> <!-- 第一种： -->
2021-07-05 解决:使用vue定义多个单标签组件时,只显示第一个组件
GAARA
07-05 1690
发现问题 设置两个组件.不能全部显示 出现原因 用单标签的时候，只会显示第一个组件 改成双标签后，就会显示两个组件了。 代码 html <div id="app"> <!-- 多标签 --> <!-- <my_component1></my_component1> <my_component2></my_component2> --> <!-- 单标签 --> &l
vue组件模板使用v-for无法渲染的问题
qq_41756580的博客
09-29 5980
最近在做项目的过程中遇到一个问题，我们创建自己的组件时，父组件传给子组件一个数组，子组件使用v-for指令无法渲染，以下是错误代码： Vue.component('component-test',{ props: { testData: { type: Array, default: [] } }, templat...
vue.js实现标签页切换
q479902964的博客
06-06 4846
第二个实例是关于标签页切换的，先看一下效果：这也是一个很常见的交互效果，以往正常的javascript写法是给各个按钮绑定事件来切换不同的层，当然也可以用纯css写，给上面的三个切换的层分别添加一个单选按钮的兄弟节点，再用绝对定位把单选按钮定位在三个button上面，这样就可以用:checked伪类来单选按钮的兄弟元素，即对应的不同的层，我简单的写了一下DOM结构，大概就是这样：那么用vue.js...
vue实现标签的双向选择
Hhjian524的博客
08-25 388
实现的效果如下： 未选择时： 选择一个或者多选时 取消选择时 具体代码如下 <template> <div class="tagBox"> <div class="tagBox_tabBoxL"> <span :class="[{ active: checkedGroup.indexOf(index) > -1 }]" :key="item.id || index" ...
在vue中使用axios请求数据 v-for渲染数据的时候结构没有出来的问题
09-08
在Vue中使用axios请求数据，并且在v-for指令中渲染数据时，如果结构没有显示出来，可能存在以下几个可能的问题： 1. 没有正确引入axios：在Vue项目中，首先要确保已经正确安装并引入了axios依赖包，可以通过在项目...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值