I am facing an issue with setting data from an API into an array in vue.js. The data obtained is in JSON format from the API.
Could you please guide me on the syntax for this?
{"id":1613,
"name_org":"US company",
"picture":"default.jpg",
"headerpic":"no-preview.png",
"description":null,
"address":null,
"type":"hardware,software,network",
"rating":0,
"created_at":"2019-03-27 18:50:51",
"updated_at":"2019-03-27 18:50:51",
"review":[{
"review_id":3,
"org_id":1613,
"user_id":2,
"description":"Very good",
"rating":3,
"created_at":null,
"updated_at":null},
{"review_id":4,
"org_id":1613,
"user_id":1,
"description":"Not bad",
"rating":5,
"created_at":null,
"updated_at":null}]
}
The challenge I am facing is primarily with the 'review' section, as it consists of an array.
I am unable to assign the API data to the 'data' property in Vue.js
<div v-for="review in reviews" class="box">{{review.review_id}}</div>
<script>
export default {
props: ["id"],
data() {
return {
name_org: "",
picture: "",
headerpic: "",
description: "",
reviews: [],
review: {
review_id: "",
org_id: "",
user_id: "",
description: ""
}
};
},
mounted() {
axios.get("/api/listorgs/" + this.id).then(response => {
var listorg = response.data;
this.name_org = listorg.name_org;
this.picture = listorg.picture;
this.description = listorg.description;
this.headerpic = listorg.headerpic;
});
},
};
</script>