vue v-for 使用问题整理
2024-09-17 13:43:15
今天使用v-for指令的时候遇到一个错误
[Vue warn]: Error in render: "TypeError: Cannot read property 'children' of undefined"
页面使用代码
<template v-for="(c,i) in modelList.Course.children">
<div :key="i" class="course-block">
<CourseStruct :process="isbuy" :course="c" />
</div>
</template>
<script> export default {
methods: {
async getList(id) {
const res = await GetChapterListByProductID(id);
if (res.data) {
this.modelList = res.data;
}
}
}
} </script>
报错原因:
我猜测使用了嵌套属性的原因,在页面中无法解析出具体属性值,这个原因是我尝试出来的,但是不知道深层次的原因了,有知道的希望评论下。
解决方案:
既然知道了原因,那么就好解决了,解决方法如下.
<template v-for="(c,i) in cls">
<div :key="i" class="course-block">
<CourseStruct :process="isbuy" :course="c" />
</div>
</template>
<script> export default {
methods: {
async getList(id) {
const res = await GetChapterListByProductID(id);
if (res.data) {
this.modelList = res.data;
var co = this.modelList.Course
this.cls = co.children
}
}
}
} </script>
通过变量中转一下,放到另一个临时变量中,如果有嵌套引用属性的话,大家记得通过js操作放到一个临时变量中,不然就会报错哟。
最新文章
- UWP Composition API - PullToRefresh
- whereis 和which
- Scalaz(38)- Free :Coproduct-Monadic语句组合
- window绝对路径与相对路径
- 一个超级简单的HTML模板框架源代码以及使用示例
- ubuntu 修改静态IP和DNS
- How to compile and install NCAR Command Language on IBM PowerPC 64 --- NCL编译安装步骤
- gradle使用eclipse debug 代码
- 企业级搜索引擎Solr 第三章 索引数据(Indexing Data)[3]
- 在C#中关于excel的导入和导出操作
- Python实战:美女图片下载器,海量图片任你下载
- IE6,IE7,IE8下报JS错误:expected identifier, string or number的原因及解决的方法
- JS 拖动DIV 需要JQUERY 支持
- 商品鼠标移过去hover效果---图片放大1.1倍
- Java文件操作(新建,遍历,删除)
- 解决用SHA256算法做私钥签名时,遇到“指定的算法无效”的问题
- Lintcode376-Binary Tree Path Sum-Easy
- 75.iOS内存管理
- 用户模拟+spec
- Spring IOC 源码之ResourceLoader
热门文章
- Navicat Premium 详解
- JS高阶---this对象
- 201871010111-刘佳华《面向对象程序设计(java)》第四周学习总结
- StarUML 系列,静态图与动态图,用例图,类图
- 【Spring IoC】BeanFactory 和 ApplicationContext(五)
- zz从Word Embedding到Bert模型—自然语言处理中的预训练技术发展史
- leetcode2. 两数相加
- 记一次排错经历,requests和fake_useragent
- [LeetCode] 159. Longest Substring with At Most Two Distinct Characters 最多有两个不同字符的最长子串
- 阅读java编程思想之一切都是对象