VueJS：v-for 中的表单 - 如何获取正确的数据？

Question

所以在 table 中，我使用 Vue.js & v-for 显示多个 "Reservations"。

table 中的每一行都有一个由以下内容组成的表格：

<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 数组中获取与表单关联的正确预订？

例如：我想发送 post 请求更新相应预订的状态。因此，我需要所选预订的 ID 和选项值。

Answer 1

传统上，您需要对 select 应用 v-model 才能读取数据。在 data() 中创建一个变量（如本例中的 reservationResponseSelection），然后在 select 本身上添加 v-model="reservationResponseSelection"。该变量将为 reactive，并在您 select 新选项时更新。然后，您可以在 sendAnswer 方法中读取该数据。

当您使用 v-for 生成此数据时，您需要为每个 select 创建一个唯一的变量。您可以使用传递到循环中的唯一数据来执行此操作。例如，您可以使用 reservation.id（与 :key 使用的相同）。

在你的data()中你会做： data() { reservationOptions: {} },

然后在您的 select 上添加：v-model="reservationOptions[reservation.id]"

这将为您提供一个对象，您的预订值对应于其中的每个 ID。

VueJS：v-for 中的表单 - 如何获取正确的数据？

VueJS: Forms in v-for - How to get the correct data?

loops

vue.js

vue-component

v-for