Часть шаблона
<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 ячейки. Но тогда возникает проблема, что с инпута пропадает фокус