Skip to main content
cuerpo editado; título editado
Origen Enlace
Marcos
  • 35.7k
  • 7
  • 36
  • 70

Mostrar ¿Como mostrar datos json con Vue-resource en Tabla Boostrap Vue?

Quiero mostrar solo algunos datos del siguiente json:

   https://randomuser.me/api/?results=10

enEn una tabla Boostrap-Vue se se supone que tengo que exportar los datos pero no se muestra mi codigo.

Mi código es el siguiente, y 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>

¿Como puedo mostrarlos?

Mostrar datos json con Vue-resource en Tabla Boostrap Vue

Quiero mostrar solo algunos datos del siguiente json:

 https://randomuser.me/api/?results=10

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>

¿Como mostrar datos con Vue-resource en Tabla Boostrap Vue?

Quiero mostrar solo algunos datos del siguiente json:  https://randomuser.me/api/?results=10

En una tabla Boostrap-Vue se supone que tengo que exportar los datos pero no se muestra.

Mi código es el siguiente y solo quiero mostrar ciertos datos como el nombre y apellido.

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

¿Como puedo mostrarlos?

se eliminaron 7 caracteres en el cuerpo
Origen Enlace
Saul Espinoza
  • 603
  • 1
  • 6
  • 25

Quiero mostrar solo algunos datos del siguiente json:

https://randomuser.me/api/?results=10

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>

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>

Quiero mostrar solo algunos datos del siguiente json:

https://randomuser.me/api/?results=10

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