0

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

1 respuesta 1

0

Encontre la forma, gracias

    <template slot="actions" slot-scope="data">
       <b-button variant="outline-info" size="sm" @click="info(data.item.id)" class="mr-1" title="Editar Movimiento"><span class="glyphicon glyphicon-edit"></span>
       </b-button>
       <b-button variant="outline-danger" size="sm" @click="info(items.id, $event.target)" class="mr-1" title="Eliminar Movimiento">
           <span class="glyphicon glyphicon-remove"></span>
       </b-button>
    </template>

Gracias por la atención

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.