Trouble with vue.js to get data from REST API

Question

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.

You should use a HTTP client package like axios or vue-resource. Vue does not include one by default. — ironcladgeek
– ironcladgeek, Commented Aug 3, 2017 at 12:45

Bert · Accepted Answer · 2017-08-03 15:08:48Z

4

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/

edited Aug 3, 2017 at 15:08

Bert

82.6k17 gold badges204 silver badges166 bronze badges

answered Aug 3, 2017 at 12:43

Crackers

1,1257 silver badges14 bronze badges

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

2 Comments

MD. Khairul Basar Over a year ago

it's not working. when I'm adding Vue.use(VueResource) It's showing {{ message }} instead of Hello. That mean vue stops working. And I'm already using the dependency you mentioned.

Bert Over a year ago

@MD.KhairulBasar The answer is now updated with the correct script.

Collectives™ on Stack Overflow

Trouble with vue.js to get data from REST API

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related