v-for 循环抛出 TypeError: Cannot read property of null in VueJS application答案

【问题标题】：v-for loop throws TypeError: Cannot read property of null in VueJS applicationv-for 循环抛出 TypeError: Cannot read property of null in VueJS application
【发布时间】：2020-10-18 07:55:05
【问题描述】：

我正在开发一个 VueJs 应用程序，它不断抛出一个我无法确定原因的错误。

<v-chip v-if="topic" v-for="(tag, iii) in topic.tags" :key="iii"
    @click:close="removeTag(tag.id)" close
    color="primary" text-color="white" class="mr-1">{{ tag.name.en }}</v-chip>

这会引发以下错误：

user-dashboard.js:75858 TypeError: Cannot read property 'tags' of null

通常，此错误是由于在组件首次呈现时指定的数据最初不可用引起的，但是我包含了 v-if 指令来防止这种情况。循环渲染组件就好了，但错误仍然存在。

还有什么可能是造成这种情况的原因，为什么组件仍然可以正确呈现？

【问题讨论】：

标签： vue.js vue-component rendering render

【解决方案1】：

您应该将v-if 指令移动到包装元素中。

<template v-if="topic">
  <v-chip v-for="(tag, iii) in topic.tags" :key="iii"
    @click:close="removeTag(tag.id)" close
    color="primary" text-color="white" class="mr-1">{{ tag.name.en }}</v-chip>
</template>

https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for

与v-if一起使用时，v-for的优先级高于v-if。

【讨论】：