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

最新推荐文章于 2023-12-13 15:15:08 发布
最新推荐文章于 2023-12-13 15:15:08 发布
阅读量390 收藏
点赞数
分类专栏： 【问题解决】 文章标签： 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 1853
列表异常显示空行，但部分正常，怀疑是渲染问题。通过源码我们得知渲染使用了v-for，咱们分为两种情况进行排查,那就先排除一个最简单的，是否存在换行符；其次排除是否存在异常渲染的情况，如渲染了看不见，渲染了空元素。
v-for后item.arr无法读取第二层数据
ikedaelaiza的博客
10-12 289
v-for后item.arr无法读取第二层数据
小程序中vue for循环出来的数据变成折叠面板
哈哈hyc的博客
03-09 1195
在我们制作移动端折叠面板的时候，可以按照ref的方式获取高度来调节，但是我们在写小程序的时候，要按照小程序的api来获取修改高度，以下为完整的折叠面板代码，可以实现自动识别高度，是否折叠 v-for里面写 class="changeBox" :style="{'height':flag[index] ? heightArr[index] < staticHeight ? heightA...
vue双向绑定标签v-model
menghuannvxia的专栏
08-01 412
vue双向绑定标签v-model
8-Vue指令之列表渲染 V-for
WinSolstice的博客
07-20 1795
1. v-for循环渲染标签 + v-for 指令根据一组数组的选项列表进行渲染。 + v-for 指令需要以“ item in items ”形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 + 模板引擎都会提供循环的支持，基本的用法类似于foreach的用法。 <div id="app"> <table> <thea
用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`的区别*...
小笔记：vue3中v-for循环ts报错，item中不存在XXX属性
jiujiubashiyi998的博客
07-15 1583
再学习vue3时，发现item报错，上百度后发现一方法得以解决。
v3+ts慢慢学习之路四【v-for和它当中的key】
qq_42514643的博客
06-09 2161
v-for中的key使用
vue3**使用v-for 循环时, 使用ref总会获取到的是最后的元素
u014773932的博客
02-09 1124
vue3 ref总是先获取最后的元素
使用v-for循环时无法识别index
XUMINGRUNDEJIE的博客
03-13 1536
Vue脚手架创建项目遇到的问题：控制台报错：在使用v-for循环时无法识别index 解决方案：v-for="(item, index) in data" :key=“index” :index=“String(index)”
在vue3中利用v-for循环使用TS文件中的变量，变量中属性的值通过语法检查报错Unresolved variable的问题
最新发布
m0_64601465的博客
12-13 889
这段代码中，本来这个**{{item.titleChinese}}**在插值语法中已经报错__Unresolved variable titleChinese__的问题。如上面所见，在用v-for时候在ts中语法检查item.titleChinese中报错Unresolved variable titleChinese。然后再把这个变量return出去的时候循环体内只要用到的属性就不会报错Unresolved variable了。
Vue3 + ts 笔记
gu2022_3_5_21_23的博客
12-23 629
1.解决直接赋值导致 proxy代理对象失去响应式。
【TS】关于v-for数组对象遍历以及在页面上使用提示object类型的问题解决
分享互联网的有趣知识~
11-16 1249
【代码】【TS】关于v-for数组对象遍历以及在页面上使用提示object类型的问题解决。
v-for渲染列表key值报错
SlothSid的博客
05-13 450
What： 报错Avoid using non-primitive value as key, use string/number value instead. Why： 在for循环中，key值可能重复或者写错了 How： 检查Vue开发者工具 发现新增item的key值被定义为对象了，去找新增item的代码 发现是插件nanoid用法错误 这才是正确的。 ...
vue学习笔记 循环遍历v-for
qq_41937087的博客
05-29 456
vue循环遍历v-for 1、v-for遍历数组 只获取元素值时：<li v-for="item in books">{{item}}</li> 例子： <div id="div1"> <ul> <li v-for="item in books">{{item}}</li> </ul> </div> // books: ['《132》', '《213》', '《321》', '《123》'] 获
vue中v-for的最佳使用技巧
努力是为了站在万人中央成为别人的光
08-18 1570
在vuejs中，v-for 的使用是比较常见的，它允许您在模板代码中编写for循环。那么在使用v-for的时候，可曾思考过使用这个指令的一些技巧吗？ 在介绍它的使用技巧之前，我先介绍下它的基本用法吧，在vue中v-for可以遍历数组、对象、字符串，但是用的最多的还是遍历数组，基本方法如下： <div id="app"> <ul> <li v-for='item in list'> {{ item.name }} </li> </ul&g
在vue中使用axios请求数据 v-for渲染数据的时候结构没有出来的问题
09-08
在Vue中使用axios请求数据，并且在v-for指令中渲染数据时，如果结构没有显示出来，可能存在以下几个可能的问题： 1. 没有正确引入axios：在Vue项目中，首先要确保已经正确安装并引入了axios依赖包，可以通过在项目的入口文件或者单独的组件中使用import语句来引入axios，例如：import axios from 'axios'。 2. 请求数据的路径错误：在使用axios发送请求时，必须确保请求的路径是正确的，即与后端提供数据的API接口一致。可以通过在浏览器的控制台查看网络请求来确定是否成功发送了请求，并且获取了正确的数据。如果请求路径错误，可以尝试重新检查请求的路径是否正确。 3. 数据结构不正确：在使用axios请求数据后，可能还需要对获取到的数据进行处理，以符合v-for指令的渲染要求。例如，如果获取到的数据是一个对象，而v-for指令需要的是一个数组，则需要将对象转化为数组，然后再进行渲染。 4. 异步请求数据的时机问题：由于axios请求数据是异步的，所以需要确保在数据请求完成后才进行渲染。可以通过使用Vue的生命周期钩子函数，如created或mounted，来保证数据已经获取到后再进行渲染。 综上所述，如果在Vue中使用axios请求数据后，v-for指令没有正确渲染数据，可能需要检查axios的引入和使用是否正确、请求路径是否正确、数据结构是否符合要求以及异步请求数据的时机是否正确。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值