get dynamic value from input in vuejs

Question

i have table in vue component and one of the column have input also tr tag in v-for. how can i get all table value and submit in one time? i mean fill all inputs and save method run one time for all of them

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

What specifically are you stuck on, can you show us how far you got? You already have all the passenger data. So just add a v-model to the input and you have everything. vuejs.org/v2/guide/forms.html — Trevor
– Trevor, Commented Jun 23, 2020 at 12:13
@Trevor i have several inputs (all tr tags have input) and all of my inputs have one v-model whit same name and that is wrong — Amirali
– Amirali, Commented Jun 23, 2020 at 12:16
v-model allows you to set an object key. v-model="passenger.input[index]" like that — Trevor
– Trevor, Commented Jun 23, 2020 at 12:20

tony19 · Accepted Answer · 2022-07-16 01:49:40Z

1

You could achieve this with v-model as suggested by others.

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

In your Template have a button that will handle the submit method:

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

Now you have to define thispassenger data object

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

Remember that v-model directive creates two-way data bindings on form input, textarea, and select elements. You can't use use it on any other elements.

If you want to learn more about v-model, please o to this link.Form Input Bindings

edited Jul 16, 2022 at 1:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 23, 2020 at 14:21

livreson ltc

7438 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syazany · Accepted Answer · 2020-06-23 12:44:37Z

1

You need to create a v-model and point the current passenger that you want to submit to that v-model.

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

Then, there will be a submit button on each passenger correct? On your submit button you can use

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

answered Jun 23, 2020 at 12:44

Syazany

2202 silver badges6 bronze badges

3 Comments

Amirali Over a year ago

actually there is one button for all passengers and i must submit all of them with one submit button

Syazany Over a year ago

Then its more of a backend work, just pass all the passengers as the payload.

Amirali Over a year ago

i do it, at first create array and pushed with passengers id and with for get each input value clearly thank you @Syazany

Collectives™ on Stack Overflow

get dynamic value from input in vuejs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related