Question

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

以下是我尝试{{ selectedTopic.name }}的内容，这会引发此错误Uncaught TypeError: Cannot read property 'name' of null

如果我打印出{{ selectedTopic }}，它会等到该数据可用，然后显示没有错误。

现在我明白我要求的数据在那个阶段是不可用的，但为什么会抛出错误？它不应该等到那个数据可用，就像{{ selectedTopic }}一样吗？

Vue app

  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 }}

Answer 1

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

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

Answer 2

它不会“等待”，因为理解undefined应该是一个空字符串。您可以使用空对象初始化selectedTopic，然后您将获得您正在寻找的结果。

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

Answer 3

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

在您的情况下，我会使用v-if="selectedTopic"保护模板的该部分，或者直接在插值中使用空检查：{{ selectedTopic ? selectedTopic.name : 'No topic selected' }}。

您也可以将其初始化为默认值，如空对象{}，但在我看来这是有缺陷的，因为selectedTopic现在是非空的，但实际上没有选择实际主题，这使代码变得复杂。

Vue语法错误

3 个答案: