Vue.js Vue语法错误

我正在尝试使用Vue打印对象的name属性

下面是我尝试的

{{selectedTopic.name}

，这会引发此错误

未捕获的类型错误：无法读取null的属性“name”

如果我打印出

{{selectedTopic}}

，它将等待数据可用，然后显示无错误

现在我知道我请求的数据在那个阶段是不可用的，但是为什么它会抛出一个错误呢？它不应该像对

{{selectedTopic}}

那样等待数据可用吗

Vue应用程序

  var qaSuggest = new Vue({
    el: '#qa-suggest',
    data: {
      selectedTopic: null,
      profiles: []
    },
    mounted() {
      bus.$on("send-topic", selectedTopic => this.selectedTopic = selectedTopic);
    },
    updated(){
      axios.get('/vueprofiles').then(response => this.profiles = response.data);
      console.log('selectedTopic: ', this.selectedTopic.name);
    }
  });

HTML

<div id="qa-suggest">
    <ul class="list-unstyled">
        <li v-for="profile in profiles">
          <div class="clearfix" style="border-bottom: 1px solid #ddd; padding: 5px;">
        <div class="pull-left">
          <img :src="profile.picture" class="img-responsive" style="max-width: 60px; margin-right: 10px;">
        </div>
        <div class="pull-left">
          <p style="font-size: 12px; margin-bottom: 0;">{{ profile.category }} / {{ profile.subcategory }}</p>
          <p><strong>{{ profile.name }}</strong></p>
        </div>
      </div>
    </li>
</ul>

Topic: {{ selectedTopic.name }}

{{profile.category}/{{profile.subcategory}
{{profile.name}}



主题：{{selectedTopic.name}

错误是因为无法访问空对象上的属性。相反，你可以试试

{{ selectedTopic ? selectedTopic.name : '' }}

它不会“等待”，而是理解未定义的字符串应该是空字符串。您可以使用空对象初始化

selectedTopic

，您将得到您要查找的结果

data: {
  selectedTopic: {},
  profiles: []
},

---

如果将其放入计算属性中，您将得到相同类型的错误。Vue只是按原样执行JS代码，没有任何类型的空保护

在您的情况下，我将使用

v-if=“selectedTopic”

保护模板的该部分，或者直接在插值中使用空检查：

{{selectedTopic？selectedTopic.name:'未选择主题'}

---

您也可以将其初始化为默认值，例如空对象

{}

，但在我看来，这是有缺陷的，因为

selectedTopic

现在是非空的，但实际上没有选择实际的主题，这使代码复杂化。

谢谢，两个答案都很好：）