[Vue3] Реакция реквизита и решения, если реквизиты не обновлены в дочернем компоненте

Одной из самых отличительных особенностей Vue является ненавязчивая система реактивности. когда вы изменяете данные экземпляра Vue, представление обновляется.

Но иногда данные не обновляются должным образом. В этой статье мы объясним, почему, и предложим вам простой, мощный и правильный способ решить эту проблему.

Причина. Изменение части объекта не приведет к повторному рендерингу.

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Решение - Реконструировать весь объект

объект = […объект]

  // we are changing only the variable isActive in the Array.
  // The changes will not trigger the updates in child components
  currentPlaceholders.value[0].isActive = true
  // trigger reactivity
  currentPlaceholders.value = [...currentPlaceholders.value

Правильный способ обновления объекта:

const syncPlaceholders = () => {
  const deckCards = gameStore.myDeck?.deck_cards || []
  currentPlaceholders.value = currentPlaceholders.value.map((item, index) => {
    item.selectedCard = deckCards[index] || null
    return item
  })
}

Неправильный способ обновления объекта:

const syncPlaceholders = () => {
  currentPlaceholders.value.forEach((item, index) => {
    item.selectedCard = dataMyDeck.value?.getMyDeck?.deck_cards[index]
    item.selectedCardStatus = dataMyDeck.value?.getMyDeck?.deck_cards[index]?.artistStatus
  })
}