ref больше не реагирует на объект реактивного массива - PullRequest
Новая
       73

ref больше не реагирует на объект реактивного массива

0 голосов
/ 29 мая 2020

Следующий код работает нормально. Когда мы меняем язык, текст обновляется правильно благодаря ref: 

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

return {
  mainNavigationLinks,
}

Но что мы действительно хотели бы, так это иметь mainNavigationLinks как объект reactive, чтобы мы могли добавить и удалите элементы из массива и попросите Vue обновить компоненты в соответствии с правильными переводами, используя ref внутри array. Согласно Vue docs это должно быть возможно

Однако, когда мы пробуем код ниже, мы видим, что метка больше не является реактивной: 

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

const mainNavigationLinks = computed(() => mainNavigation)

Чего нам здесь не хватает, чтобы можно было добавлять элементы в массив и при этом сохранять его реактивность? Спасибо за помощь.

1 Ответ

1 голос
/ 30 мая 2020

Похоже, что вы хотите, чтобы массив был реактивным, но элементы в массиве были вычисленными свойствами. 

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 (вы получаете выгоду от кеширования), либо функцией. Ваш код не работает, потому что вы получаете перевод меток сразу после создания массива.

...