table> de la siguiente manera:
<div id="app" class="container">
<b-table
show-empty
stacked="md"
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
@filtered="onFiltered">
<template slot="id">
</template>
<template slot="actions" slot-scope="item">
<b-button size="sm" @click="info(items.id)" class="mr-1">
<span class="glyphicon glyphicon-edit"></span>
</b-button>
<b-button size="sm" @click="info(items.id, $event.target)" class="mr-1">
<span class="glyphicon glyphicon-remove"></span>
</b-button>
</template>
</b-container>
</template>
</div>
De los cuales los lleno de una api que tengo, con un llamado get si puedo mostrar los datos en mi tabla y me funciona todo lo demás, pero el único detalle es que no logro identificar el Id que es lo que requiero:
var app = new Vue({
el: "#app",
delimiters: ['${','}'],
components: {
vuejsDatepicker
},
data() {
return {
items: [],
fields: [
{ key: 'id', label: 'Id', sortable: true, sortDirection: 'desc', class: 'text-center' },
{ key: 'tipo', label: 'Tipo', sortable: true, class: 'text-center' },
{ key: 'descripcion', label: 'Descripción', sortable: true, class: 'text-center' },
{ key: 'razaanimal.nombre', label: 'Raza', sortable: true, class: 'text-center' },
{ key: 'fecha', label: 'Fecha', sortable: true, class: 'text-center' },
{ key: 'actions', label: 'Acciones', class: 'text-center' }
],
totalRows: 1,
currentPage: 1,
perPage: 5,
pageOptions: [5, 10, 15],
sortBy: null,
sortDesc: false,
sortDirection: 'asc',
filter: null,
infoModal: {
id: '',
title: '',
content: ''
}
}
},
computed: {
sortOptions() {
// Create an options list from our fields
return this.fields
//alert(this.fields)
.filter(f => f.sortable)
.map(f => {
return { text: f.label, value: f.key }
})
}
},
mounted() {
this.getMovimientos()
},
methods: {
getMovimientos: function() {
this.loading = true;
this.$http.get('/control/movimiento/api/mov/').then(response => {
this.items = response.data;
//alert(this.items);
this.loading = false;
}, response => {
this.loading = false;
console.log(err);
});
},
info(id) {
alert(id)
this.infoModal.title = 'Row index: ${id}'
this.infoModal.content = JSON.stringify(id, null, 2)
this.$root.$emit('bv::show::modal', this.infoModal.id)
},
resetInfoModal() {
this.infoModal.title = ''
this.infoModal.content = ''
},
}
});
en la parte de Acciones, quiero obtener el id que obtengo de mis datos en la api, pero no encuentro la forma, alguien me puede ayudar por favor?
<template slot="actions" slot-scope="item">
**En esta parte--->**<b-button size="sm" @click="info(items.id)" class="mr-1">
<span class="glyphicon glyphicon-edit"></span>
</b-button>
<b-button size="sm" @click="info(items.id, $event.target)" class="mr-1">
<span class="glyphicon glyphicon-remove"></span>
</b-button>
</template>
Ya intente varias formas, pero nada, no logro encontrarlo. Necesito el id que viene desde mi api, para poder enviarlo a un modal y llevar la id para poder modificar y eliminar