CODEWITHSUNDEEP
javascriptapivue.jsvuejs2vue-router
MD. Khairul Basar
MD. Khairul Basar

Reputation: 5110

Trouble with vue.js to get data from REST API

I'm trying to get data from a rest api using vue.js. But it's not working. It neither show response data nor showing error status. Can't figure it out what went wrong.

Here's my index.html

<html>
    <body>
        <script src="https://unpkg.com/vue"></script>

        <div id="app">
            {{ message }}
        </div>

        <script>
            var url = "http://clients.itsd.com.bd/table-cartel/wp-json/wp/v2/categories";
            var app = new Vue({
                el: "#app",
                data: {
                    message: "Hello!"
                },
                methods: {
                    work: function(){
                        alert(url);
                        this.$http.get(url).then(function(response){
                            alert(response.data);
                            this.message = response.data;
                        }, function(error){
                            alert(error.statusText);
                        });
                    }
                },
                mounted: function(){
                    this.work();
                }
            });
        </script>
    </body>
</html>

It's showing url, but not showing response.data or error.statusText.

I followed the process described here.

Upvotes: 1

Views: 1169

Answers (1)

Crackers
Crackers

Reputation: 1125

That is because you are missing vue-resource. Also include this dependency: 

<script src="https://unpkg.com/vue-resource"></script>

And before creating the vue instance, paste this:

Vue.use(VueResource)

Here is a working fiddle https://jsfiddle.net/DarkFruits/euv04n9d/

Upvotes: 4

Related Questions