@ivan0512

Как починить реактивность?

Часть шаблона
<div v-for="({ id, cells }, indexRow) of rows" :key="id" class="table__row">
          <div class="table__row-cells" :class="classRowCells">
            <Cell
              v-for="(cell, indexCell) of cells"
              :key="cell.id"
              :data="cell"
              class="table__cell"
              :step="step"
              :maxMinutes="maxMinutes"
              @change="editCell({ indexCell, indexRow, value: $event })"
            />
            <div class="table__cell">
              <BtnIcon iconMaterial="clear" class="table__btn-delete" @click="deleteRow(id)" />
            </div>
          </div>
          <RowCreator class="table__add-row" @add="addRow(indexRow + 1)" />
        </div>

model: {
      prop: 'data',
      event: EVENT_MODEL,
    },

    props: {
      data: {
        type: Array,
        required: true,
      },
    },

    computed: {
      rows() {
        return GradientTableAdapter.toRows(this.data, this.fractionsCount);
      },
    },

    methods: {
      setData(data) {
        this.$emit(EVENT_MODEL, data);
      },
      editCell({indexRow, indexCell, value}) {
        const rows = [...this.rows];
        rows[indexRow].cells[indexCell] = {
          ...rows[indexRow].cells[indexCell],
          value: Number(value),
        };

        const data = GradientTableAdapter.fromRows(rows);
        this.setData(data);
      },
    }

Подскажите, как можно решить проблему. Rows - computed свойство, зависимое от v-model. Cell содержит внутри инпут, при его изменении срабатывает событие. В editCell я изменяю данные и отправляю событие на изменение модели. Этот компонент корректно реагирует на изменение модели, но проблема в том, что вью не видит изменение data внутри cell. Хотя значение инпута в данных изменилось.

Один из вариантов решения - это каждый раз менять id ячейки. Но тогда возникает проблема, что с инпута пропадает фокус
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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