Как применить действие к конкретному объекту?

Question

[stanislavkm]

В таблице есть строка с данными, которые изначально readonly и в одном из полей строки есть кнопка с методом "attr_toggle" которая позволяет редактировать эту запись.
При нажатии на кнопку открывается доступ ко всем записям, а нужно именно к конкретной записи.
Понимаю, что нужно передавать параметром значение уникальное для каждой записи, но возникают трудности с реализацией.

<tr v-for="(item, index) in this.$store.state.items" :key="index">
...
          <td><textarea class="adm_input" type="text" :value="`${item.desc}`" :readonly="isReadonly"></textarea></td>
          <td><input class="adm_input" type="text" :value="`${item.price}`" :readonly="isReadonly"></td>
...
          <td class="row_btn"><button @click="attr_toggle(index)"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button></td>
        </tr>

attr_toggle(index){
      this.isReadonly = !this.isReadonly;
    },

И еще вопрос: можно ли у записи указывать ключ - index. Видел информацию, что так лучше не делать, так как при удалении записи могут произойти ошибки.

Answer 1

[TjLink]

Смотри, мой тебе совет, как сделать так, чтобы при нажатии на кнопку, доступна была именно эта строка.
1) Определи массив в cumputed переменной
computed: {
itemsArray () {
return this.$store.state.items
},
};

2) Сделай так, чтобы у каждой строки был параметр isEditable
{
id: 1,
name: '...',
isEditable: false,
}

То есть, если значение false, то изменить нельзя, если true, то можно изменять.
3) Переделай условие. :readonly="!isEditable"
4) Как обработать нажатие на кнопку.
attr_toggle(id) {
const row = this.itemsArray.find((items) => items.id === id)
row.isEditable = true;
}

, где id - id строки, row - найденная строка.