Search code examples
javascriptvue.jsvue-resource

Vue.JS $HTTP displaying data from an api

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

Solution

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