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

Posted 2023-02-23

【中文标题】VueJS：v-for 中的表单 - 如何获取正确的数据？

【英文标题】：VueJS: Forms in v-for - How to get the correct data?

【发布时间】：2018-11-21 21:34:56

【问题描述】：

因此，在表格中，我使用 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 数组中获取与表单相关联的正确预订？

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

【参考方案1】：

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

---

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

在您的data() 中，您会： data() reservationOptions: ,

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

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