欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 14:41:10
今天使用v-for指令的时候遇到一个错误 [vue warn]: error in render: "typeerror: cannot read property...

今天使用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 使用问题整理小结,希望对大家有所帮助