0

У меня есть таблица с 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) при вводе значений в поля. Как это сделать?

2
  • не совсем понятно что должно быть на выходе и вообще почему такая логика. могли бы вы объяснить вообще задачу этого кода? 31 авг 2021 в 6:48
  • У меня есть массив данных (любой длинны), он приходит с сервера (пока имитирую его мок данными). Нужно, чтобы можно было изменить данные, вводя в поля новые значения. 31 авг 2021 в 6:54

1 ответ 1

1

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

    <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.

3
  • 1
    Верно, спасибо. Только id должен быть как :id, иначе он получится для всех полей одинаковым. 31 авг 2021 в 7:04
  • Точно. Исправил.
    – tetelevm
    31 авг 2021 в 7:07
  • Да, все получилось. Спасибо. 31 авг 2021 в 7:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.