Возможно ли в Vue вывести данные формата [{...}, {...}, ...]
Есть API. С него приходят подобные данные:
[
{
"id": "1",
"name": "some name1",
"description": "some discription1"
},
{
"id": "2",
"name": "some name 2",
"description": "some discription2"
},
...
]
На Vue я забираю эти данные с помощью axios следующим образом:
var app = new Vue({
el: '#app',
data() {
return {
catalogs: null
};
},
mounted() {
axios
.get('http://127.0.0.1:8000')
.then(response => (this.catalogs = response));
}
});
И пытаюсь вывести на страницу:
<div id="app">
<ul>
<li v-for="catalog in catalogs">
ID: {{ catalog.id }}
<br>
Name: {{ catalog.name }}
<br>
Description: {{ catalog.description }}
</li>
</ul>
</div>
Но ничерта не выходит (Что, возможно, естественно). Данные приходят в [ ], но взаимодействовать с ними не выходит.
По этому вопрос:
Такие структуры вообще можно разложить, или обязателен json?
Например:
{'catalogs': [
{
"id": "1",
"name": "some name1",
"description": "some discription1"
},
{
"id": "2",
"name": "some name 2",
"description": "some discription2"
},
...
]
}
UPD:
Вариант с this.catalogs = response.catalogs все так же не работает
created: function () {
const vm = this;
axios
.get('https://127.0.0.1:8000')
.then(function (response) {
this.catalogs = response.catalogs;
})
}
Вот какие данные приходят с axios:
