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

【问题标题】：[Vue warn]: Error in render: "TypeError: _vm.activity.activity is undefined"[Vue 警告]：渲染错误：“TypeError：_vm.activity.activity 未定义”
【发布时间】：2019-01-03 07:16:02
【问题描述】：

我有这个 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 是从 vuex_rest_api 加载的 JSON 对象

我无法弄清楚为什么这条线在渲染正常时会引发错误。

【问题讨论】：

标签： javascript vue.js vuex

【解决方案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>

【讨论】：

正确，或者做类似{{ activity.activity ? activity.activity.title : '...' }}的事情，这可能比动态创建DOM元素要快。

【解决方案2】：

您应该在data 部分设置一个初始值（例如null），并更改模板以检查activity 是否实际上是一个对象并定义了给定的键

<template>
  <div class="activity box">
    <h1>{{activity && activity.activity ? activity.activity.title : 'Loading ...'}}</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
      });
  }
}
</script>

【讨论】：