Vue API client does not respond to the JSON request

Question

Vue API client does not respond to the JSON request

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am making a request to API with Vue to adapt it with Rail , but when I print the data on the screen it sends me empty, this is the connection to 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']
    }
  }
});

Then I do the deployment in the 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>

And it does not send the information when I do the inspection of the data through the browser sends me the following.

I would appreciate if you could indicate to me if I am omitting something.

json api vue.js

asked by JULIO MACHAN 22.05.2017 в 17:19

source

2 answers

mysql_connect () Several tables in a log with JOIN SQL query

score 0 · Answer 1

You are trying to register a component, but you are using a selector to "choose" the component, I'm not sure it works that way, try the following code:

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>',
    }
  }
});

And in the html:

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

The components serve to "extend" the html, but have a couple of special features, such as one direction to send data using props and then you have to use events to communicate with the parent.

Official Doc: link

Try the code and see if you are walking, or if you need more help.

Greetings!

score 0 · Answer 2

Within the method omiti the parameter resulted and already displays the data:

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