Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

371
Vistas
How can I get only the field from a vuetify table to post in axios

How can I get only the field from a vuetify table to post by in axios, I have a table as I show in the following code

 <div id="app">
      <v-app id="inspire">
        <v-card>
          <v-card-title>
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Search"
              single-line
              hide-details
            ></v-text-field>
          </v-card-title>
          <v-data-table
            :headers="headers"
            :items="students"
            :search="search"
          >
            <template  v-slot:item.status="{ item }">
              <v-btn v-if="item.status" @click="add(item)">Add</v-btn>
              
              <v-btn v-else disabled>Temporarily no access</v-btn>   
            </template>
            
          </v-data-table>
        </v-card>
      </v-app>
    </div>

and from script I have the following code

 const app = new Vue({
   el: '#app',
   vuetify: new Vuetify(),    
   data() {
         return {
           search: '',
           headers: [
             { text: 'Number list', align: 'start', value: 'id'},
             { text: 'Name', align: 'start', value: 'name'},
             { text: 'Options', value: 'status' }
           ],
           students: [
        {
          id: 1,
          name: pedro,
          status: activo,
        },
        {
          id: 2,
          name: juan,
          status: activo,
        },
        {
          id: 3,
          name: jose,
          status: activo,
        },
       ]
         };
       },
    methods: {
        add (item) {
        axios.post('http://localhost/list?id=' + item.id)
          .then(response => {
            this.response = response
        }).catch(e => {
          console.log(e)
        });
      },
    
    }
 });

What I want to do is that when it is clicked I only sent the id per post with axios but when I click it I get an error in the console that says that item is undefined that is my main error, and as you can see I need it to be first verify that the student's status is active. Below I also add an image of the generated table for further reference.

table reference

Edit

i forgot put

 @click="add(item)"

but still doesn´t work, no longer even an error appears in the console even if it has the catch

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Try:

 <v-btn v-if="item.estado" @click="add(item)">Add</v-btn>

Try 2: Check first if item is coming through correctly by adding the following line. Maybe this will help in tracking down the problem

     <template v-slot:item.status="{ item }">
              <p>Debug item text: {{item}}</p>
              <v-btn v-if="item.status" @click="add(item)">Add</v-btn>
              
              <v-btn v-else disabled>Temporarily no access</v-btn>   
            </template>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda