Использование Axios и Vue.js для загрузки данных JSON

Question

Я пытаюсь отобразить данные JSON на своей веб-странице, используя функцию v-for в Vue.js и Axios для получения данных. Ниже приведен мой код и пример данных JSON, которые я пытаюсь использовать.

Я специально сохранил URL данных JSON как частный, поэтому я привел пример структуры данных.

Я могу напечатать весь набор данных на своей странице, как это показано ниже, но если я использую свой код ниже для печати определенных частей данных, таких как идентификатор или имя, тогда я ничего не получу на странице.

<div id="root">
        <p v-for="item in items">{{ item.name }}</p>
    </div>

    <script>

        var app = new Vue({
          el: '#root',

          data: {
            items: []
          },

          mounted() {
            axios.get("...")
            .then(response => {this.items = response.data.data})
          }

        });         

    </script>

Пример данных JSON:

json { "current_page": 1, "data": [ { "id": "83", "name": "Name1", }, { "id": "78", "name": "Name2", }, { "id": "720", "name": "Name3", }, { "id": "707", "name": "Name4", }, { "id": "708", "name": "Name5", } ], "from": 1, "prev_page_url": null, "to": 20, "total": 42 }

Answer 1

глядя на код, все выглядит хорошо, но у меня есть пример в приложении, над которым я работаю, и я заметил, что ваш массив элементов должен содержать response.data.data.data, который является подробным, но вы можете поработать над этим позже