javascript - Vue+Laravel : How to mounted data from api if data in form array in one of tuple data

Question

我有来自 API 的数据，但无法将数组中的数据设置为 vue.js 中的 this.data这是来自 API 的数据(JSON)

你能告诉我这个语法吗

{"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}]
 }

我在审阅时遇到问题，因为它是一个数组。

我无法将API中的数据设置为vue中的数据

<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>

Answer 1

由于您的 API 响应是一个对象，因此请在 data 下定义一个空对象。

data() {
    return { 
        orgsData: {} 
    }
}

然后将其与您的 API 一起使用，如下所示:

this.orgsData = response.data

并将其附加到 HTML 中

<div v-for="review in orgsData.reviews" class="box">{{review.review_id}}</div>

希望对你有帮助!