Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

369
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!