Проблема с vue.js для получения данных из REST API

Question

Проблема с vue.js для получения данных из REST API

1

Я пытаюсь получить данные из rest api, используя vue.js. Но это не работает. Он не отображает данные ответа и не показывает статус ошибки. Не могу понять, что пошло не так.

Вот мой 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>

Он показывает url, но не показывает response.data или error.statusText.

Я следовал описанному здесь процессу.

MD. Khairul Basar 03 авг. 2017, в 14:49

Источник

0

Вы должны использовать клиентский пакет HTTP, такой как axios или vue-resource . Vue не включает один по умолчанию.
ironcladgeek 03 авг. 2017, в 12:45

Теги:

javascript

vue.js

vue-router

vuejs2

api

1 ответ

Ещё вопросы

Вы должны использовать клиентский пакет HTTP, такой как axios или vue-resource . Vue не включает один по умолчанию.

D F · Accepted Answer · 2017-08-03T09-43-00.000Z

Это потому, что вам не хватает vue-resource. Также включите эту зависимость:

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

Перед созданием экземпляра vue вставьте это:

Vue.use(VueResource)

Вот рабочий скрипт https://jsfiddle.net/DarkFruits/euv04n9d/

это не работает. когда я добавляю Vue.use(VueResource) он показывает {{ message }} вместо Hello . Это значит, что Vue перестает работать. И я уже использую зависимость, которую вы упомянули.
@ MD.KhairulBasar Ответ теперь обновляется с помощью правильного сценария.
Ух ты !! Работает нормально !! Большое спасибо !! : D