從 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 的更多信息，請訪問此鏈接。 表單輸入綁定