0

以下代码工作正常。当我们更改语言时，由于以下原因，文本会正确更新ref：

const mainNavigationLinks = computed(() => [
  { label: context.root.$t('navigationMenu.home') },
  { label: context.root.$t('navigationMenu.tickets') },
])

return {
  mainNavigationLinks,
}

但是我们真正想要的是将 .mainNavigationLinks作为一个reactive对象，这样我们就可以从数组中添加和删除项目，并让 Vueref使用array. 根据Vue 文档，这应该是可能的

然而，当我们尝试下面的代码时，我们看到标签不再是反应性的：

const mainNavigation = reactive([
  { label: context.root.$t('navigationMenu.home') },
  { label: context.root.$t('navigationMenu.tickets') },
])

const mainNavigationLinks = computed(() => mainNavigation)

为了能够将项目添加到数组并仍然具有反应性，我们在这里缺少什么？感谢您的帮助。

4

1 回答 1

1

看起来您想要的是让数组具有反应性，但数组中的项目是计算属性。

const mainNavigation = reactive([
  { label: computed(() => context.root.$t('navigationMenu.home')) },
  { label: computed(() => context.root.$t('navigationMenu.tickets')) },
])

computed或者，只要每个label属性都引用您必须调用的函数，您就可以在此处完全不使用：

const mainNavigation = reactive([
  { label: () => context.root.$t('navigationMenu.home') },
  { label: () => context.root.$t('navigationMenu.tickets') },
])

这是主要思想：每个都label需要在使用时进行评估，这就是为什么它必须是computed属性（您从缓存中受益）或函数的原因。您的代码不起作用，因为您在构建数组时立即获得标签翻译。

于 2020-05-30T00:07:54.263 回答