vue v-for 使用问题整理小结


Posted in Javascript onAugust 04, 2019

今天使用v-for指令的时候遇到一个错误

[Vue warn]: Error in render: "TypeError: Cannot read property 'children' of undefined"

vue v-for 使用问题整理小结

页面使用代码

<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 使用问题整理小结,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript访问样式表代码
Oct 15 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 #Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 #Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 #Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 #Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 #Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
小程序中英文混合排序问题解决
Aug 02 #Javascript
You might like
在字符串中把网址改成超级链接
2006/10/09 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
Javascript实现单例模式
2016/01/24 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python中的yield使用方法
2014/02/11 Python
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
django中的setting最佳配置小结
2017/11/21 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python获取Linux发行版名称
2019/08/30 Python
pycharm安装及如何导入numpy
2020/04/03 Python
如何在django中运行scrapy框架
2020/04/22 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
优秀社区干部事迹材料
2014/02/03 职场文书
客服专员岗位职责
2014/02/28 职场文书
社区先进事迹材料
2014/05/19 职场文书
拉歌口号大全
2014/06/13 职场文书
个人简历求职信范文
2015/03/20 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang