0

Estoy haciendo una solicitud a una API con Vue para adaptarlo con Rail, pero cuando hago la impresión de los datos en pantalla me manda vació, este es la conexión a la API:

main.js:

var urlAPI = 'xxxxxxxxxx';

    new Vue({
      el: 'body',
      created: function() {
        this.consultaAPI();
      },

      data: {
        personas: []
      },
      methods: {
        consultaAPI: function() {
          this.$http.get(urlAPI)
        .then(function(respuesta) {
          this.personas = respuesta.data.results;
        });
    }
  },
  components: {
    'personas': {
      template: '#personas-template',
      props: ['lista']
    }
  }
});

Luego hago el despliegue en el html:

 <personas :lista="personas"></personas>
  <template id="personas-template">
    <ul v-for="persona in lista">
      <li>{{ persona.name}}</li>
    </ul>
  </template>

  <pre>
  {{ $data | json}}
  </pre> 

Y no manda la información cuando hago la inspección de los datos pro medio del navegador me manda lo siguiente.

Captura

Agradeceria si pudieran indicar me si estoy omitiendo algo.

2 respuestas 2

0

estas intentando registrar un componente, pero estas usando un selector para "elegir" el componente, no estoy seguro de que funcione asi, proba el siguiente codigo:

var urlAPI = 'xxxxxxxxxx';

    new Vue({
      el: 'body',
      created: function() {
        this.consultaAPI();
      },

      data: {
        personas: []
      },
      methods: {
        consultaAPI: function() {
          this.$http.get(urlAPI)
        .then(function(respuesta) {
          this.personas = respuesta.data.results;
        });
    }
  },
  components: {
    'personas': {
      props: ['lista'],
      template: '<ul v-for="persona in lista"><li>{{ persona.name}}</li></ul>',
    }
  }
});

Y en el html:

<body>
  <personas lista="personas">
  </personas>
  <pre>
    {{ personas | json}}
  </pre>
</body>

Los componentes te sirven para "extender" el html, pero tienen un par de características especiales, como one direction para enviar datos usando props y despues tenes que usar eventos para comunicarte con el parent.

Doc oficial: https://v2.vuejs.org/v2/guide/components.html

Probá el codigo y fijate si anda, o si necesitas mas ayuda.

saludos!

1
  • Hola ya revise otra informacion y al parecer cuando le paso el results no funciona por lo que lo omiti y ya despliega los datos gracias por tu ayuda. el 22 may. 2017 a las 17:43
0

Dentro del method omiti el parametro result y ya despliega los datos:

  methods: {
    consultaAPI: function() {
      this.$http.get(urlAPI)
        .then(function(respuesta) {
          this.personas = respuesta.data;
        });
    }
  },

introducir la descripción de la imagen aquí

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.