代码之家 › 专栏 › 技术社区 › xTheWolf

vuejs:v-for中的表单-如何获取正确的数据?

v-for vue-component vue.js loops

1

xTheWolf · 技术社区 · 6 年前

所以在一个表中,我使用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 数组?

例如:我想发送一个post请求,更新各自预订的状态。因此,我需要所选预订的ID和选项值。

1 回复 | 直到 6 年前

1

Kwesi 6 年前

传统上,你需要申请 v-model 对你 select 这样你就可以读取数据了。在中创建变量 data() (如 reservationResponseSelection 在本例中),然后在 选择 本身添加 v-model="reservationResponseSelection" . 变量将是 reactive ,并在选择新选项时更新。然后可以在 sendAnswer 方法。

当你使用 v-for 要生成此数据,您需要为每个 选择 . 可以通过使用传递到循环中的唯一数据来完成此操作。例如,您可以使用 reservation.id (与您用于 :key )

在你 数据() 你应该: data() { reservationOptions: {} },

然后在你的 选择 您可以添加: v-model="reservationOptions[reservation.id]"

然后给您一个对象,其中的保留值对应于其中的每个id。