How to get the value of a Vuetify Select? - vue.js

Question

I have a vuetify select (v-select):
<v-select prepend-icon="local_shipping" :rules="[v => !!v || 'Es necesario asignarl el T.A.R.']" required label="T.A.R." v-model="editedItem.tarID" :items="tars" item-text="nombre" item-value="id"></v-select>
What i want to do is get the value of the id in edit mode, that is, in this way:
I have been following the official documentation of vuetify to edit an item of a table in a modal dialog.
Just as the inputs have assigned text, I would also like the select to have its assigned data.
Here is what i have:
The edit button:
<v-btn icon class="mx-0" #click="editItem(props.item)">
<v-icon color="info">mode_edit</v-icon>
</v-btn>
The editedItem and the defaultItem, just like the official documentation:
editedItem: {
entidadID: "",
numeroEstacion: "",
tarID: "",
clave: "",
id:""
},
defaultItem: {
entidadID: "",
numeroEstacion: "",
tarID: "",
clave: "",
id: ""
},
The way in which i populate the v-select in data:
tars: [
{
id: "",
nombre: ""
}
],
I populate my tables like this:
<v-data-table
:headers="headers"
:items="items"
hide-actions
class="slideInDown"
:search="search"
:id="items.id"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.grupo }}</td>
<td class="text-xs-right">{{ props.item.numeroEstacion}}</td>
<td class="text-xs-right">{{ props.item.clave }}</td>
<td class="text-xs-right">{{ props.item.nombre }}</td>
<td class="text-xs-right">{{props.item.id}}</td>
<td class="justify-center layout px-0">
<v-btn icon class="mx-0" #click="editItem(props.item)">
<v-icon color="info">mode_edit</v-icon>
</v-btn>
<v-btn icon class="mx-o" #click="deleteItem(props.item)">
<v-icon color="red">delete_sweep</v-icon>
</v-btn>
</td>
</template>
<v-alert slot="no-results" :value="true" color="error" icon="warning">
Tu búsqueda para "{{search}}" no arrojó resultados.
</v-alert>
</v-data-table>
And the editItem button:
editItem(item) {
this.editedIndex = this.items.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
The editedIndex equals -1 in data return. So when i touch New Item button editedIndex = -1, when i touch The edit button, editedIndex != -1, like the documentation
The link of the official documentation:
https://vuetifyjs.com/en/components/data-tables
Here is my PUT method:
if(this.editedIndex > -1){
axios({
headers:{
"Authorization": "Bearer "+localStorage.getItem('token')
},
method: "put",
url: "http://localhost:58209/api/PutEstacion",
data:{
NumeroEstacion: this.editedItem.numeroEstacion,
Clave: this.editedItem.clave,
**TarID: this.editedItem.tarID**,
ID: this.editedItem.id,
}
}).then(response => {
console.log(response);
this.snackbar = true;
this.textSnackbar = "La información ha sido actualizada correctamente";
this.dialog = false
}).catch(error =>{
console.log(error.response);
this.snackbar = true;
this.textSnackbar = "Lo sentimos ha ocurrido un problema actualizando la informacíón";
this.dialog = false
});
}
This line: TarID: this.editedItem.tarID has no value. So i can't put in my WebApi. And finally my WbApi:
var ID = _context.Estacion.Where(x => x.ID == putEstacionDTO.ID).Select(x => x.ID).FirstOrDefault();
var NumeroEstacion = putEstacionDTO.NumeroEstacion;
var Clave = putEstacionDTO.Clave;
var TarID = putEstacionDTO.TarID;
var putEstacion = _context.LoadStoredProc("PutEstaciones")
.WithSqlParam("p0", NumeroEstacion)
.WithSqlParam("p1", Clave)
.WithSqlParam("p2", TarID)
.WithSqlParam("p3", ID)
.ExecuteStoredProc<PutEstacionDTO>();
return Ok();
When i debugging only the 'select' = 0 (TarID).
EDIT, Add the :items="items" of datatable
Data:
items: [
{
id: "",
grupo: "",
numeroEstacion: "",
clave: "",
nombre: "",
}
],
Method to set the items:
axios
.get("http://localhost:58209/api/GetEstaciones", {
headers: {
Authorization: "Bearer " + localStorage.getItem("token")
}
})
.then(response => {
console.log(response);
this.items = response.data;
this.snackbar = true;
this.textSnackbar = "Se han cargado correctamente las estaciones";
})
.catch(error => {
console.log(error.response);
this.snackbar = true;
this.textSnackbar =
"Lo sentimos, no pudimos cargar la información de los tanques";
});