I want to display only some data from the following json: https://randomuser.me/api/?results=10
In a Boostrap-Vue table I am supposed to export the data but it doesn't show.
My code is the following and I only want to display certain data such as the 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?
The problem is that the fields
first_name
andlast_name
do not exist in the oneJSON
returned byrandomuser
. Instead we can findname.first
andname.last
.In order to access nested values we can make use of
Scoped field slots
where we declare theslot
equal to the name offield.key
and inside this add the expressiondata.item.*
to print the desired value.Solution:
You could do it like this:
demonstration: