_vm.arr[0] 未定义 Vue.js, Nuxt答案

【问题标题】：_vm.arr[0] is undefined Vue.js, Nuxt_vm.arr[0] 未定义 Vue.js, Nuxt
【发布时间】：2021-08-28 14:37:58
【问题描述】：

我有一个网站。有一个带有导航栏的主页。导航栏包含 2 个链接。还有一个链接（主链接），它在其他页面上。当我单击主链接时，它会打开一个具有相同导航栏的新页面。我应该点击任何链接，它会将我重定向到它们。

问题：如果我单击主页上的导航栏并单击主链接，则效果很好。如果通过单击主链接进入页面，我可以使用导航栏。但是，如果我刷新页面它不起作用。这是来自控制台的错误：

_vm.arr[0] is undefined

components special.vue html 部分：

<h2 v-if="$t(arr[0].link.name) == 'category-spec'">...</h2>
<h2 v-else-if="$t(arr[0].link.name) == 'customers-spec'">...</h2>

components special.vue 脚本部分：

export default defineComponent({
  props: {
    arr: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  components: {
    ...
  },
  setup () {
    return {
      ...
    }
  }
})

我猜它坏了，因为当我刷新页面时，还没有收到关于 arr 的数据。但是为什么其他数据还可以呢？

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

在 Vue 3 模板中，您可以在 arr[0] 上使用 optional chaining，以便 arr[0] 仅在真实时被取消引用：

<h2 v-if="$t(arr[0]?.link.name) == 'category-spec'">...</h2>
                   ?   ?
<h2 v-else-if="$t(arr[0]?.link.name) == 'customers-spec'">...</h2>

demo

或者你可以事先检查arr[0]：

<h2 v-if="arr[0] && $t(arr[0].link.name) == 'category-spec'">...</h2>
<h2 v-else-if="arr[0] && $t(arr[0].link.name) == 'customers-spec'">...</h2>

【讨论】：