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

2024-10-29 09:03:47

今天使用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中常见循环遍历指令的使用 v-for

vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu
解决vue组件中使用v-for出现告警问题及v for指令介绍

在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic
vue.js指令v-for使用及索引获取

1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <
vue使用v-for实现hover点击效果

使用Vue来实现鼠标悬停效果.可以使用事件处理器v-on指令(简写为:@)来完成.为标签绑定mouseenter以及mouseleave事件即可. hover是css中的选择器,用于选择鼠标指针浮动在上面的元素.所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式. 在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变
使用vue中的v-for遍历二维数组的方法

如下所示: <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'> <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-
在vue中,v-for的索引index在html中的使用方法

如下所示: 以上这篇在vue中,v-for的索引index在html中的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue.js指令v-for使用及索引获取 Vuejs在v-for中,利用index来对第一项添加class的方法 Vue.js常用指令汇总(v-if.v-for等)
vue使用Element组件时v-for循环里的表单项验证方法

标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法
基于vue中解决v-for使用报红并出现警告的问题

代码报红对于追求优美代码的强迫症患者来说看着很不舒服,报红如下: 控制台中也会有: (Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for
vue2.0使用v-for循环制作多级嵌套菜单栏

使用v-for循环生成一个多级嵌套菜单栏,只要你学会了这个方法,几乎所有的菜单栏都可以实现了. 方法 <div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a> <div class="level-two" v-if="obj1.parentId == obj.id
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">
webpack4.0打包优化策略整理小结

本文介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资料当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件从而缩小了loader加载搜索范围高概率命中文件 module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除不处理的目录
10大HBase常见运维工具整理小结

摘要:HBase自带许多运维工具,为用户提供管理.分析.修复和调试功能.本文将列举一些常用HBase工具,开发人员和运维人员可以参考本文内容,利用这些工具对HBase进行日常管理和运维. HBase组件介绍 HBase作为当前比较热门和广泛使用的NoSQL数据库,由于本身设计架构和流程上比较复杂,对大数据经验较少的运维人员门槛较高,本文对当前HBase上已有的工具做一些介绍以及总结. 写在前面的说明: 1) 由于HBase不同版本间的差异性较大(如HBase2.x上移走了hbck工具),本文使用
Docker管理之碎片知识整理小结

目录一.概述二.应用示例 2.1.Docker容器隔离之Namespace 2.2.Docker之自由限制cgroup 2.3.给运行中的容器设置端口映射 2.4.修改运行中docker容器中的内容 2.5.Docker容器迁移到其他服务器 2.6.查看docker镜像中文件 2.7.运行容器:docker run常用选项一.概述本文旨在汇总整理Docker日常管理之知识碎片,以便日后回顾查看参考. 二.应用示例 2.1.Docker容器隔离之Namespace Namespace:是容
Vue.directive 自定义指令的问题小结

1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my
Pandas中DataFrame基本函数整理(小结)

构造函数 DataFrame([data, index, columns, dtype, copy]) #构造数据框属性和数据 DataFrame.axes #index: 行标签:columns: 列标签 DataFrame.as_matrix([columns]) #转换为矩阵 DataFrame.dtypes #返回数据的类型 DataFrame.ftypes #返回每一列的数据类型float64:dense DataFrame.get_dtype_counts() #返回数据框数据类
数据库索引的知识点整理小结,你所需要了解的都在这儿了

数据库索引,相信大家都不陌生吧. 索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息.作为辅助查询的工具,合理的设计索引能很大程度上减轻db的查询压力,db我们都知道,是项目最核心也是最薄弱的地方,如果压力太大很容易产生故障,造成难以预计的影响.所以,不管是日常开发还是面试,索引这一块知识体系都是必须掌握的. 当然,虽说是必须掌握,但索引的知识点很多,很多初学者经常会遗漏,这也是我为什么想写这篇知识点总结的原因,既是给读者的分享,也是给自己一次全面的复习,
vue各种事件监听实例(小结)

计算属性的Get方法和Set方法看代码说话: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue小练习</title> </head> <body> <div id="calc"> <a v-cloak="">{{name}}</a> &l
Vue.js前端框架之事件处理小结

1. v-on 事件监听监听DOM事件使用 v-on 指令.该指令通常在模板中直接使用,在触发事件时会执行一些 JavaScript 代码. v-on 指令的基本用法 (1)在 HTML 中使用 v-on 指令,后面可以是所有的原生事件名称.基本用法如下: <button v-on:click="show">显示</button> 将 click 单击事件绑定到 show 方法中,单击"显示"按钮时,执行 show() 方法,show()
Vue环境搭建报错整理大全

目录错1: 执行 cnpm install / npm install 报错如下办法1:降低node.js版本办法2:降低版本依旧报错,执行相关命令报错2:core-js 缺失问题报错3: Connection was aborted, errno 10053 报错4:npm ERR! git@github.com: Permission denied (publickey) 错误5:Error: Cannot find module 'webpack' 问题解决办法错误6: wan

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

相关推荐

随机推荐