Установить новое значение ключа в объекте массива (v-модель с v-for)

У меня есть таблица с 3 полями (текстовые и селект) в цикле v-for:

    <v-simple-table class="table">
      <tbody v-for="(item, i) in items" :key="item.id">
        <tr>
          <td>
              {{ item.date }}
          </td>
          <td>
            {{ item.email }}
          </td>
          <td>
              <v-text-field
                :value="item.amount"
                type="text"
                @blur="setPrice(item)"
                :v-model="'price_' + i"
              >
              </v-text-field>
          </td>
          <td>
              <v-select
                :items="statuts"
                :value="item.status"
                @input="setStatus(item)"
                :v-model="'status_' + i"
              ></v-select>
          </td>
        </tr>
        <tr v-if="item.hasOwnProperty('comment')">
          <td colspan="4">
              <v-textarea
                :value="item.comment"
                type="text"
                @blur="setComment(item)"
                :v-model="'comment_' + i"
              >
              </v-textarea>
          </td>
        </tr>
      </tbody>
    </v-simple-table>

И скрипт:

<script>
export default {
  name: "table",
  data() {
    return {
      items: window.transactions,
      statuses: ['Paided', 'Requested', 'Cancelled'],
      statuts: [
        {
          text: 'requested',
          value: 'requested',

        },
        {
          text: 'cancelled',
          value: 'cancelled',
        },
        {
          text: 'paid',
          value: 'paid',
        },
      ],
    };
  },
  methods: {
    setPrice(item) {
    },
    setComment(item) {
    },
    setStatus(item) {
    },
  },
};
</script>

Мне удалось сделать значение v-модель каждого поля уникальными, но я не могу получить значения полей в методах. Мне нужно изменить ключи элемента, на котором пользователь обновил данные, в items (window.transaction) при вводе значений в поля. Как это сделать?


Ответы (1 шт):

Автор решения: Michael Tetelev

Если я не ошибаюсь, ваш код должен выглядеть примерно так:

    <v-simple-table class="table">
      <tbody v-for="(item, i) in items" :key="item.id">
        <tr>
          <td>
              {{ item.date }}
          </td>
          <td>
            {{ item.email }}
          </td>
          <td>
              <v-text-field
                :id="'amount_' + i"
                v-model="item.amount"
                type="text"
                @blur="setPrice(item)"
              >
              </v-text-field>
          </td>
          <td>
              <v-select
                :id="'status_' + i"
                v-model="item.status"
                :items="statuts"
                @input="setStatus(item)"
              ></v-select>
          </td>
        </tr>
        <tr v-if="item.hasOwnProperty('comment')">
          <td colspan="4">
              <v-textarea
                :id="'comment_' + i"
                v-model="item.comment"
                type="text"
                @blur="setComment(item)"
              >
              </v-textarea>
          </td>
        </tr>
      </tbody>
    </v-simple-table>

v-model не нужны :, а также в неё передаётся само значение, а айдишник ставится, собственно, в id.

→ Ссылка