CODEWITHSUNDEEP
vue.js
FN PLY
FN PLY

Reputation: 41

Cannot read property of 'name'

For some reason I cannot go through this. I want to have above every text big text that says from what course it is. Console is saying that it cannot read property name but I don't know why. Im not very experienced in this so anything would be helpful. Anybody could help me please?

    <template>
      <ion-page>
        <a-header :backButton="true" />
        <ion-content>
          <!-- <h4 v-if="!lessons">Zatiaľ si si nič nepridal do obľubených lekcií</h4> -->
          <h4 v-if="!lessons || !lessons.length">Zatiaľ si si nič nepridal do obľubených lekcií</h4>
            <div v-else :key="group.name">
              <h3> {{ group.group_name }} </h3>
              <div v-for="lesson in lessons" :key="lesson.id" class="item-wrapper" >
                <ion-item @click="$router.push({name:'lesson', params:{courseSlug:course.slug, lessonSlug:lesson.slug }})" lines="none"> <P>{{lesson.name}}</P> </ion-item> 
              </div>
            </div>
          </ion-content>
      </ion-page>
    </template>
    
    <script>
    import aHeader from '@/plugins/app/_components/a-header.vue'
    import { mapGetters } from 'vuex'
    import wAxios from '@/plugins/w/axios'
    
    export default  {
      name: 'oblubene',
      components: { aHeader },
      data() {
        // eslint-disable-next-line no-unused-vars
        return {
          lessons: [],
          course: [],
        }
      },
      computed: {
            ...mapGetters('wAuth', [
                'user'
            ]),
        },
    
      async created() {
        const lessonIds = this.user.lessons_stars.map(lesson => lesson.lesson_id)
    
        for(const id of lessonIds) {
          const lesson = await wAxios.get(`https://open-academy.sk/cms/api/lessons/${id}`)
          this.lessons.push(lesson.data)
        }
    
        
      }
    } 
    </script>

Upvotes: 2

Views: 47

Answers (1)

T. Short
T. Short

Reputation: 3614

You are using group.name, but group is not defined anywhere.

<div v-else :key="group.name">

That's why you are getting the error cannot read property name.

Either define group or use something that is already defined.

Upvotes: 2

Related Questions