VueJS: Формы в v-for - Как получить правильные данные? - PullRequest
Новая
       26

VueJS: Формы в v-for - Как получить правильные данные?

0 голосов
/ 12 июня 2018

Итак, в таблице я отображаю несколько «резервирований», используя Vue.js & v-for.

Каждая строка в таблице имеет форму, которая состоит из этого: 

<tr v-for="reservation in reservations" :key="reservation.id">
            <td>
                <form @submit.prevent="sendAnswer" method="post" >
                    <select name="reservationResponse" id="reservationResponse" v-model="selected">
                        <option value="invalid">-- Select Answer --</option>
                        <option value="confirm">Confirm</option>
                        <option value="full">Full</option>
                        <option value="closed">Closed</option>
                        <option value="remove">Remove without E-Mail</option>
                    </select>
                    <br><br>
                    <input type="submit" class="btn btn-blue btn-sm" value="Send answer">
                </form>
            </td>
</tr>

Теперь, когда я нажимаю одну из кнопок отправки, как я могу получить правильное резервирование, связанное с формой, из моего reservations массива?

например: я хочу отправить запрос на публикацию с обновлением статусасоответствующее бронирование.Для этого мне нужен идентификатор и значение опции выбранного бронирования.

1 Ответ

0 голосов
/ 12 июня 2018

Традиционно вам нужно применить v-model к вашему select, чтобы вы могли прочитать данные.Создайте переменную в data() (например, reservationResponseSelection в этом примере), а затем в select добавьте v-model="reservationResponseSelection".Переменная будет реактивная и будет обновляться при выборе новой опции.Затем вы можете прочитать эти данные в вашем методе sendAnswer.

Поскольку вы используете v-for для генерации этих данных, вам потребуется создать уникальную переменную для каждого select.Вы можете сделать это, используя уникальные данные, которые передаются в цикл.Например, вы можете использовать reservation.id (тот же, который вы используете для :key).

В вашем data() вы должны сделать: data() { reservationOptions: {} },

изатем к вашему select вы добавите: v-model="reservationOptions[reservation.id]"

Затем вы получите объект со значениями резервирования, соответствующими каждому ID внутри него.

...