Vue.JS $HTTP displaying data from an api

Question

 html>
    <head>
    <title>Vue App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
 </head>

<body>
<!--
<h1>
    <a href="http://localhost:1337/"> Home Page</a>
</h1>
<h1>
    <a href="http://localhost:1337/form"> Form Page</a>
</h1>
 -->

<div id="my_view">
    <p>{{ responseOptions| json }}</p>
    <br />
    <p>{{ origin | json }}</p>
</div>

<script>
    new Vue({
        el: '#my_view',
        data: {
            origin: ''

        },
        //it is showing an empty array. It's not returning any data.
        //leave name:"name" out  and it returns the whole object?
        // example from https://github.com/pagekit/vue-   resource/blob/master/docs/http.md


 ready: function () {
            var resource =   this.$resource('https://jsonplaceholder.typicode.com/users');
            resource.get({name: "name"}).then((response) => {

                this.$set('responseOptions', response.status)
                this.$set('origin', response)
            });
        }
    })

        </script>
   </body>
   </html>

Hello, Trying to figure out how the vue-resource $http access to an api works. So created this basic page and when I load it to the browser, all I get is an empty array. I followed the instruction posted on the official page (https://github.com/pagekit/vue-resource/blob/master/docs/http.md)

I'm able to display the response.status on the page so the script is communicating but the data is not displayed at all. If you visit the page (https://jsonplaceholder.typicode.com/users) data is there.

What am I doing wrong? Please advise...

If you are using Vue 2, ready hook is depracated - use mounted instead, or even better option is go with created. Also what is this.$resource ? There you should define this.$http — Belmin Bedak
– Belmin Bedak, Commented Dec 5, 2016 at 21:04

Belmin Bedak · Accepted Answer · 2016-12-05 21:22:49Z

0

Check this example

https://jsbin.com/jeqekexiqa/edit?html,js,console,output

First I noticed you are using two versions of vue together, which is not good.I sticked in example with Vue 2.

Next, this.$resource is a bit strange thing for me, so I'm not sure what is suposed to do.You can use Vue.http globally, or this.$http if you want to use it directly into Vue instance.

In my example I defined array, where we would store data.Then I write method that would trigger http request and get JSON data from server, and store that data in items array in our data model.

But...that's not enough because our method is not triggered, so we call it immediately after Vue instance is created, by using created() lifecycle hook.

Later in template, we just do simple iteration with v-for to show that everything is working.

edited Dec 5, 2016 at 21:22

answered Dec 5, 2016 at 21:16

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marco Over a year ago

Thank you Belmin. Very generous with your answer. Helped me a lot.

Collectives™ on Stack Overflow

Vue.JS $HTTP displaying data from an api

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related