0

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

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) - я вижу, что в стейте оно изменяется, но компонент не изменяет то что мне нужно (а именно цвет блока).

Почему так?

1
  • А зачем менять алгоритм, если в массиве только один объект? Только лишняя путаница возникает. 27 дек 2021 в 8:47

1 ответ 1

0

Если 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

2
  • Когда я делаю :key="device.id" - перерисовка не происходит, при :key="device" - все рабоатет нормально. В чем разница между v-for="item in device" v-for="item of device"? Гугление говорит что и тот и тот вариант верный
    – kotaine
    27 дек 2021 в 7:13
  • Точно не знаю в чем разница во Vue, но по крайней мере тем самым Вы не будите вводить в заблуждение, т.к. нативные for in и for of работают по-разному. Я ни разу не видел использование for of в шаблонах Vue. Уточните, какие данные Вы пытаетесь отрисовать? 28 дек 2021 в 8:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.