v-for loop throws TypeError: Cannot read property of null in VueJS application

Question

我正在开发一个 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 指令以防止这种情况发生。循环渲染组件很好，但错误仍然存在。

还有什么可能是这个原因，为什么组件仍然正确呈现？

Answer 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。

v-for loop throws TypeError: Cannot read property of null in VueJS application

v-for loop throws TypeError: Cannot read property of null in VueJS application

rendering

render

vue.js

vue-component