时间戳

首页 > 解决方案 > 从 vuejs 中的输入获取动态值

javascript - 从 vuejs 中的输入获取动态值

问题描述

我在 vue 组件中有表格，其中一列在 v-for 中也输入了 tr 标签。如何一次性获取所有表值并提交？我的意思是填写所有输入并保存方法为所有输入运行一次

<table >
    <thead>
    <tr>
        <th>NO</th>
        <th>Costumer Name</th>
        <th>Total Amount</th>
        <th>Total Paid</th>
        <th>Total Refund</th>
        <th>Actual Paid</th>
        <th>Balance</th>
        <th>New Pay</th>
    </tr>
    </thead>
    <tbody>

    <tr v-for="(passenger , index) in passengers">
        <td >{{ index+1 }}</td>
        <td >{{ passenger.name_ar }}</td>
        <td >{{ passenger.payment }}</td>
        <td >{{ passenger.payments+' KD' }}</td>
        <td >{{ passenger.returned+' KD' }}</td>
        <td >{{ passenger.payment.paid }}</td>
        <td >{{ passenger.payment.total_amount }}</td>
        <td >
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" :ref="passenger.id">
                </div>
            </div>
        </td>


    </tr>
    </tbody>

</table>

标签： javascriptlaravelvue.js

解决方案

您可以按照其他人的建议使用 v-model 来实现这一点。

//****** Add v-model to your input**********
<input type="text" class="form-control" v-model="thispassenger" :ref="passenger.id">

在您的模板中有一个将处理提交方法的按钮：

<button type="submit" @click="addPassaenger">Add Passenger</butoon>

现在你必须定义这个乘客数据对象

export default {
  data() {
     return {  thispassenger : {} }
  },
// ****** method to handle the submit
methods: {
    addPassaenger() {
       //put your submit logic here
       // example axios.post('url', this.thispaasenger);
    }
 }
}

请记住，v-model 指令在表单输入、文本区域和选择元素上创建双向数据绑定。您不能在任何其他元素上使用它。

如果您想了解有关 v-model 的更多信息，请访问此链接。表单输入绑定

推荐阅读