Компонент не реагирует на изменения

Question

не могу разобраться с тем, почему не компонент не реагирует на изменение свойств объекта внутри массива. Суть:

computed: {
    device() {
      return this.$store.getters.getDevices;
    },
  },

возвращает массив с объектами. Когда их несколько - я использую:

<DeviceCardItem
        class="mb-3 col colCard"
        v-for="item of device"
        :key="item"
        v-bind:device="item"
        v-bind:isAdmin="isAdmin"
        v-bind:filtered="filterByDeviceId"
      />

и при изменении свойства (device.is_active) происходит то, что мне нужно. Когда в массиве только один объект, я меняю код на:

computed: {
    device() {
      return this.$store.getters.getDevices[0];
    },
  },

и

<DeviceCardItem
        class="mb-3 col colCard"
        v-bind:device="device"
        v-bind:isAdmin="isAdmin"
        v-bind:filtered="filterByDeviceId"
      />

и пробую изменить тоже свойство (device.is_active) - я вижу, что в стейте оно изменяется, но компонент не изменяет то что мне нужно (а именно цвет блока).

Почему так?

Answer 1

Если device - обычный массив, используйте for in

v-for="item in device"

и именуйте, согласно содержимому

get devices()

Не используйте объекты в качестве ключей.

v-for="(item, index) in device"
        :key="index"

v-for="item in device"
        :key="item._id" // если есть айди

При инициализирующем значении для $store.devices = undefined, реактивность не работает. Это должен быть пустой массив.

Почитайте про реактивность https://ru.vuejs.org/v2/guide/reactivity.html

БЛОГ НА HUSL

Компонент не реагирует на изменения

Ответы (1 шт):