zoukankan      html  css  js  c++  java
  • 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操作放到一个临时变量中,不然就会报错哟。

  • 相关阅读:
    Innodb存储引擎
    Innodb学习之MySQL体系结构
    C# sql查询数据库返回单个值方法
    Welcome To SWPUNC-ACM
    P2184 贪婪大陆 题解
    线上Java调优-Arthas入门
    JVM调优学习笔记
    RabbitMQ博文收藏
    System.Net.WebException: 远程服务器返回错误: (405) 不允许的方法。
    随机过程-Brown运动
  • 原文地址:https://www.cnblogs.com/dawenyang/p/11275552.html
Copyright © 2011-2022 走看看