Составил на сервере (laravel) json запрос, который получает комментарии статьи
/api/articles/articleUrl/comments
{
"data": [
{
"type": "comments",
"id": "1",
"attributes": {
"content": "content"
},
"relationships": {
"user": [
{
"type": "user",
"id": "3",
"attributes":{
"username":"Aisha Quitzon"
}
}
]
}
},
....
]
}
Я получил все комментарии через fetch:
Vue:
async fetchComments(){
this.comments = await fetch('/api/articles/' + articleUrl + '/comments').then(res => {
return res.json();
}).then(comments => comments.data)
}
Перебираю через v-for
<div v-for="(comment, index) in comments" :key="index">
<div>{{ comment.attributes.content }}</div>
<a id="username">{{ comment.relationships.user[0].attributes.username }}</a>
</div>
Мне не нравится, то чтобы получить данные от пользователя, приходится длинный код писать comment.relationships.user[0].attributes.username
Нужно ли к примеру в колонки user "attributes":{..} ?
Или лучше user - перенести на отдельный api запрос?
Подскажите, как можно это все упростить.