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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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
PHP安装全攻略:APACHE
2006/10/09 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
JS trim去空格的最佳实践
2011/10/30 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
小程序云开发实战小结
2018/10/25 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
python中pass语句用法实例分析
2015/04/30 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
超市5.1促销活动
2014/01/15 职场文书
大专生毕业的自我评价
2014/02/06 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
英语邀请函范文
2015/02/02 职场文书
2015年市场部工作总结
2015/04/30 职场文书
工作经历证明范本
2015/06/15 职场文书
大学生军训感言
2015/08/01 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书