1

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.

MD. Khairul Basar
  • 4,976
  • 14
  • 41
  • 59
  • You should use a HTTP client package like [axios](https://github.com/mzabriskie/axios) or [vue-resource](https://github.com/pagekit/vue-resource). Vue does not include one by default. – ironcladgeek Aug 03 '17 at 12:45

1 Answers1

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/

Bert
  • 80,741
  • 17
  • 199
  • 164
Crackers
  • 1,097
  • 6
  • 14
  • 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. – MD. Khairul Basar Aug 03 '17 at 15:04
  • 2
    @MD.KhairulBasar The answer is now updated with the correct script. – Bert Aug 03 '17 at 15:07