[Vue警告]：渲染错误：“ TypeError：_vm.activity.activity未定义”

Question

我有这个VueJS组件给我错误 [Vue warn]: Error in render: "TypeError: _vm.activity.activity is undefined"

<template>
  <div class="activity box">
    <h1>{{activity.activity.title}}</h1>
    <div>

    </div>

    <h2>{{activity}}</h2>
  </div>

</template>

<script>
let activity = {}

export default {
  data () {
    return {
      activity
    }
  },
  methods: {},
  created: function () {
    this.$store.dispatch('show_activity', {params: {id: this.$route.params.id}}).then(activity => {
      this.activity = activity.data

    }, response => {

    })
  }
}
</script>

该行<h1>{{activity.activity.title}}</h1>导致错误。如果我将其更改为<h1>{{activity}}</h1>页面加载正常。奇怪的是，第一个实际上确实在页面上加载了标题，但是引发的JS错误导致页面上的其他js无法正常运行。activity是从中加载的JSON对象vuex_rest_api

我无法弄清楚为什么该行在呈现正常时会引发错误。

Answer 1

由于activity通过获取某些数据来异步设置对象，因此activity当模板尝试访问该对象时，该对象不包含内部属性。

最好在获取数据后呈现它。因此，将v-if指令用作：

<h1 v-if="activity.activity">{{activity.activity.title}}</h1>

如果显示某种类型的加载以指示用户正在加载数据，那将更好。

<h1 v-if="activity.activity">{{activity.activity.title}}</h1>
<p v-else> loading.....</p>