Question

以下是CourseDescriptionPage.vue的外观

＆＃13;

  import CourseCover from './CourseDescription/CourseCover.vue'
  import WhyJoin from './CourseDescription/WhyJoin.vue'
  import CourseStructure from './CourseDescription/CourseStructure.vue'
  export default {
    props: ['id'],
    data () {
      return {
        hasDetails: false
      }
    },
    created () {
      this.$store.dispatch('loadCourseDetails', this.id).then(() => {
        this.hasDetails = true
      })
    },
    computed: {
      course () {
        return this.$store.state.courseDetails[this.id]
      }
    },
    components: {
      CourseCover,
      WhyJoin,
      CourseStructure
    },
    name: 'CourseDescriptionPage'
  }

＆＃13;

<template>
  <div v-if="hasDetails">
    <course-cover :courseTitle="course.title" :courseDuration="course.duration"></course-cover>
    <why-join :courseTitle="course.title" :courseJobs="course.jobs"></why-join>
    <course-structure :lectureList="course.lectureList"></course-structure>
  </div>
</template>

＆＃13;

以下是我的商店的外观

＆＃13;

import Vuex from 'vuex'
import * as firebase from 'firebase'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
      courseDetails: {},
      loading: false
    },
    mutations: {
      setCourseDetails (state, payload) {
        const { id, data } = payload
        state.courseDetails[id] = data
      },
      setLoading (state, payload) {
        state.loading = payload
      }
    },
    actions: {
      loadCourseDetails ({commit}, payload) {
      commit('setLoading', true)
      firebase.database().ref(`/courseStructure/${payload}`).once('value')
        .then((data) => {
          commit('setCourseDetails', {
            id: payload,
            data: data.val()
          })
          commit('setLoading', false)
        })
        .catch(
          (error) => {
            console.log(error)
            commit('setLoading', false)
          }
        )
    }
  }

＆＃13;

以下是我的CourseCover.vue的外观

＆＃13;

  export default {
    props: {
      courseTitle: {
        type: String,
        required: true
      },
      courseDuration: {
        type: String,
        required: true
      }
    },
    name: 'CourseCover'
  }

＆＃13;

<template>
  <v-jumbotron 
    src="./../../../static/img/course_cover_background.png">
    <v-container fill-height> 
      <v-layout align-center>
        <v-flex>
          <h3>{{ courseTitle }}</h3>
          <span>{{ courseDuration }}</span>
          <v-divider class="my-3"></v-divider>
          <v-btn large color="primary" class="mx-0" @click="">Enroll</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-jumbotron>
</template>

＆＃13;

我认为我在这里使用道具的方式有问题，但我无法弄明白。数据由我知道的firebase存储，因为它在Vue dev工具中显示，但我无法理解为什么Vue会抱怨这一点。提前谢谢。

Answer 1

当然在组件初始化时未定义，因此您应该返回一个空对象：

computed: {
  course () {
    return this.$store.state.courseDetails[this.id] || {}
  }
},

渲染中出错：＆＃34; TypeError：无法读取属性＆＃39; title＆＃39;未定义＆＃34;在渲染CourseDescriptionPageComponent时

1 个答案: