从 vuejs 中的输入获取动态值

Question

我在 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>

Answer 1

您需要创建一个 v-model 并将您要提交的当前乘客指向该 v-model。

export default {
  data() {
  return {
    passengerModal : {}
  

那么，每个乘客上都会有一个提交按钮对吗？ 在您的提交按钮上，您可以使用

<button @click="passengerModal = passenger; submitThisPassenger()>Current passenger</button>

Answer 2

您可以按照其他人的建议使用 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>

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

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 指令在表单输入、文本区域和 select 元素上创建双向数据绑定。 您不能在任何其他元素上使用它。

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