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