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

因此，在一个表中，我使用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>

现在，当我按下其中一个提交按钮时，如何从我的预订数组中获得与表单关联的正确预订

---

e、 g:我想发送一个post请求，更新相应预订的状态。因此，我需要所选预订的id和选项值。

传统上，您需要对所选预订应用v型模型，以便读取数据。在数据中创建一个变量，如本例中的reservationResponseSelection，然后在选择本身上添加v-model=reservationResponseSelection。变量将为，并在选择新选项时更新。然后可以在sendAnswer方法中读取该数据

当您使用v-for生成此数据时，需要为每个select创建一个唯一的变量。您可以通过使用传递到循环中的唯一数据来实现这一点。例如，您可以使用reservation.id，该id与您用于：键的id相同

在您的数据中，您将执行以下操作： 资料{ reservationOptions:{} },

然后在您的选择中添加：v-model=reservationOptions[reservation.id]

然后，这将为您提供一个对象，其保留值对应于其中的每个ID