@nurdus

Почему не отрабатывает реактивность массива во vue?

Добрый день.
Приложение на nuxt, есть массив (items получаю через props):
<template>
<tr v-for="item in items" :key="item._id" @click="select(item)">
    <td>
      <input type="checkbox" v-model="item.checked">
    </td>
    <!--...-->
  </tr>
</template>

Ниже разные варианты select-ов
<script>
  methods: {
    select1: function(item) {
      item.checked = !item.checked
    },

    select2: function(item) {
      this.$set(item, "checked", !item.checked)
    },

    select3: function(item) {
      this.$set(item, "checked", !item.checked)
      this.$set(this.items, item._id, item)
    },
    // еще был вариант с индексом, но не стал приводить
  }
</script>


Все они работают ТОЛЬКО на странице открытой по ssr, например, на domain.com?page=1, НО если перейти по пагинации на page=2, то перестают работать (checkbox не обновляется, а console.log(item.checked) все верно)
  • Вопрос задан
  • 282 просмотра
Решения вопроса 1
@nurdus Автор вопроса
Нашел. Проблема была в том, что изначально "checked" был добавлен НЕ реактивно. :)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Vash
насколько я понял, вы отдаете items в props дочернего компонента, а потом хотите их менять в дочернем же компоненте.

в таком случае https://ru.vuejs.org/v2/guide/components-props.htm...
"..вы не должны пытаться изменять входной параметр внутри дочернего компонента.."
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы