#Vue2 How to obtain inputs from a row in the Vuetify table?

Question

My table is this down, I didn’t put variables because I don’t think you do. I just want to understand how to get all the inputs of a row when I click the button of the same row so I can send with Next.post.

<v-simple-table dense>
       <template v-slot:default>
          <thead>
               <tr>
                  <th class="text-left">ID</th>
                  <th class="text-left">Nome</th>
                  <th class="text-left">Marca</th>
                  <th class="text-left">Ações</th>
               </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in carros">
            <td>
                {{item.id}}
            </td>   
            <td>
                <v-text-field></v-text-field>
            </td>
            <td>
                <v-text-field></v-text-field>
            </td>

            <td>
               <v-btn small class="ma-2" color="primary" dark>
                 <i class="material-icons">
                   check_circle
                 </i>
               </v-btn>
            </td>
          </tr>
          </tbody>
       </template>
    </v-simple-table>

I don’t know if I need you to pass any id to the inputs.. I’d like to know. Thanks in advance for your attention!

Answer 1

No need to add id us inputs.

Use v-model us inputs and then take the amount you need in a method that is triggered by clicking the button.

Take a look at this example, I think it might help you.

new Vue({
      el: '#app',
      data: {
       carros: [
       {id: 1, nome: "Carro 1", marca: "Marca A"},
       {id: 1, nome: "Carro 2", marca: "Marca B"},
       {id: 1, nome: "Carro 3", marca: "Marca C"}
       ]
      },
      methods: {
      get(item) {
          console.log("valor input 1 => ", item.nome, " valor input 2 => ", item.marca);
        }
      },
      vuetify: new Vuetify(),
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
 
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
<v-simple-table dense>
       <template v-slot:default>
          <thead>
               <tr>
                  <th class="text-left">ID</th>
                  <th class="text-left">Nome</th>
                  <th class="text-left">Marca</th>
                  <th class="text-left">Ações</th>
               </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in carros" :key="index">
            <td>
                {{item.id}}
            </td>   
            <td>
                <v-text-field v-model="item.nome"></v-text-field>
            </td>
            <td>
                <v-text-field v-model="item.marca"></v-text-field>
            </td>

            <td>
               <v-btn @click="get(item)" small class="ma-2" color="primary" dark>
                 get
               </v-btn>
            </td>
          </tr>
          </tbody>
       </template>
    </v-simple-table>
</div>