Question

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

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

return {
  mainNavigationLinks,
}

但是我们真正想要的是将mainNavigationLinks作为reactive对象，因此我们可以从数组中添加和删除项目，并让Vue通过使用正确的翻译来相应地更新组件。 ref中的array。根据{{3}}，这应该是可能的

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

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

const mainNavigationLinks = computed(() => mainNavigation)

我们在这里缺少什么以便能够向数组添加项目并且仍然具有反应性？谢谢您的帮助。

Answer 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属性（可以从缓存中受益）或函数的原因。您的代码无法正常工作，因为在构造数组时会立即获得标签翻译。

ref在反应性数组对象中不再反应性

1 个答案: