Question

缺少 slug 学习 vue.js

2021-06-19

109

vue.js

这整个过程的目的是尝试从收藏夹选项卡直接进入我喜欢的课程。控制台说 slug 未定义，我不知道该怎么办。如果有人能帮助我，那就太好了。尝试了一些方法，但没有奏效，因为这不仅是我的代码试图添加一个简单的东西，而且对我来说真的很难，如果有人能帮助我，那就太好了。

这是控制台中显示的内容

Uncaught TypeError: Cannot read property 'slug' of undefined
        at onClick (favourite.vue?0d11:9)
        at eval (runtime-dom.esm-bundler.js?830f:315)
        at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
        at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
        at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:173)
        at HTMLElement.invoker (runtime-dom.esm-bundler.js?830f:301)

代码：

<template>
  <ion-page>
    <a-header />
    <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>
          <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: [],
      lesson: null,
      
    }
  },
  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>

Answer 1

您有隐藏变量： v-for 的 lessons 中的 lesson 和 data() 中的 lesson 。

在这里，它尝试引用 data.lesson ，它是 null 。

data() {
    return {
      lessons: [],
      lesson: null, // <-- to remove
    }
  },

删除它，它应该可以正常工作。

Answer 2

模板中有两个 props 具有 .slug 引用： course.slug 和 lesson.slug 。 lesson 是在 v-for 中声明的迭代器，但 course 在相关代码中的任何地方均未定义。

要解决此问题，您需要声明 course （例如，作为数据属性）：

export default {
  data() {
    return {
      lessons: [],
      course: {
        slug: 'my-slug'
      }
    }
  }
}

demo