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

Question

以下代码工作正常。由于 ref:

，当我们更改语言时，文本会正确更新

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

return {
  mainNavigationLinks,
}

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

但是，当我们尝试使用下面的代码时，我们发现标签不再具有反应性：

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 在反应数组对象中不再反应

ref no longer reactive within a reactive array object

javascript

vue.js

vue-i18n

vue-composition-api