vue v-for 使用问题整理小结
更新时间：2019年08月04日 08:46:05 作者：大稳·杨
使用v-for指令的时候遇到一个错误问题，具体错误代码在文章给大家列出，对vue v-for使用问题感兴趣的朋友跟随小编一起学习吧
今天使用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操作放到一个临时变量中，不然就会报错哟。
总结
以上所述是小编给大家介绍的vue v-for 使用问题整理小结，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
vue转electron项目及解决使用fs报错:Module not found: Error: Can&apo
这篇文章主要给大家介绍了关于vue转electron项目及解决使用fs报错:Module not found: Error: Can‘t resolve ‘fs‘ in的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了vue实现拖拽进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要为大家详细介绍了Vue3如何利用vuedraggable实现动态配置页面,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下2023-12-12
这篇文章主要介绍了Vue.js系列之项目结构说明(2)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-01-01
今天小编就为大家分享一篇Vuejs2 + Webpack框架里,模拟下载的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue实现聊天界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
Vue+ElementUI 封装简易PaginationSelect组件的详细步骤
这篇文章主要介绍了Vue+ElementUI 封装简易PaginationSelect组件,这里简单介绍封装的一个Pagination-Select组件几个步骤，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
今天在移动端项目中遇见一个需求,需要数据无限滚动,所以下面这篇文章主要给大家介绍了关于手写vue无限滚动指令的详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue-router中关于meta的作用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
国际化就是指在一个项目中，项目中的语言可以进行切换（中英文切换），那么在实际项目中是如何实现的呢，本文就给大家详细的介绍实现方法,需要的朋友可以参考下2023-07-07
最新评论