How to show data with Vue-resource in Tabla Boostrap Vue?

Question

How to show data with Vue-resource in Tabla Boostrap Vue?

Navigation

#1 by (2 votes)

1

I want to show only some data of the following json: link

In a Boostrap-Vue table it is assumed that I have to export the data but it is not displayed.

My code is as follows and I just want to show certain information such as first and last name.

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

How can I show them?

javascript json vue.js

asked by Saul Espinoza 31.01.2018 в 23:44

source

1 answer

ScrollView does not work: ScrollView can host only one direct child Error generating war file - Java Spring 5

score 2 · Accepted Answer

The problem is that the fields first_name and last_name do not exist in the JSON returned by randomuser . Instead we can find name.first and name.last .

To be able to access nested values we can use Scoped field slots where we declare the slot equal to the name of field.key and within this add the expression data.item.* to print the desired value.

Solution:

You could do it like this:

<template>
  <b-table :fields="fields" :items="personas">
    <template slot="first_name" slot-scope="data">
      {{data.item.name.first}}
    </template>
    <template slot="last_name" slot-scope="data">
      {{data.item.name.last}}
    </template>
  </b-table>
</template>

<script>
export default {
  name: 'Agenda',
  data () {
    return {
      fields: [
        { key: 'first_name', label: 'Last Name' },
        { key: 'last_name', label: 'First Name' }
      ],
      personas: []
    }
  },
  created: function () {
    this.obtenerAPI()
  },
  methods: {
    obtenerAPI () {
      this.$http.get('https://randomuser.me/api/?results=10')
        .then(function (respuesta) {
          this.personas = respuesta.body.results
        })
    }
  }
}
</script>

Demo:

var app = new Vue({
  el: '#app',
  data () {
    return {
      fields: [
        { key: 'first_name', label: 'Last Name' },
        { key: 'last_name', label: 'First Name' }
      ],
      personas: []
    }
  },
  created: function () {
    this.obtenerAPI()
  },
  methods: {
    obtenerAPI () {
      this.$http.get('https://randomuser.me/api/?results=10')
        .then(function (respuesta) {
          this.personas = respuesta.body.results
        })
    }
  }
})

<link rel="stylesheet prefetch" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <template>
    <b-table :fields="fields" :items="personas">
      <template slot="first_name" slot-scope="data">
        {{data.item.name.first}}
      </template>
      <template slot="last_name" slot-scope="data">
        {{data.item.name.last}}
      </template>
    </b-table>
  </template>
</div>