Skip to main content
1 de 3
Saul Espinoza
  • 603
  • 1
  • 6
  • 25

Mostrar datos json con Vue-resource en Tabla Boostrap Vue

Quiero mostrar solo algunos datos del siguiente json:

en una tabla Boostrap-Vue se supone que tengo que exportar los datos pero no se muestra mi codigo es el siguiente, solo quiero mostrar ciertos datos como el nombre y apellido ¿como puedo mostrarlos?

<template lang="html">
  <div>
    <b-table striped hover :personas="personas" :fields="fields"></b-table>
  </div>
</template>
<script>
export default {
  name: 'Agenda',
  data () {
    return {
      fields: {
        last_name: {
          label: 'Person last name',
          sortable: true
        },
        first_name: {
          label: 'Person first name',
          sortable: true
        }
      },
      personas: []
    }
  },
  created: function () {
    this.obtenerAPI()
  },
  methods: {
    obtenerAPI () {
      this.$http.get('https://randomuser.me/api/?results=10')
        .then(function (respuesta) {
          this.personas = respuesta.body.results
          console.log(this.personas)
        })
    }
  }
}
</script>

<style lang="css">
</style>
Saul Espinoza
  • 603
  • 1
  • 6
  • 25