Question

因此，我在表格中显示多个＆＃34;预订＆＃34;使用Vue.js＆amp; 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和选项值。

Answer 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对应的预留值。

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

1 个答案: