Vue + Laravel：如果元组数据之一中的表单数组中的数据，如何从api挂载数据

Posted 2023-02-22

【中文标题】Vue + Laravel：如果元组数据之一中的表单数组中的数据，如何从api挂载数据

【英文标题】：Vue+Laravel : How to mounted data from api if data in form array in one of tuple data

【发布时间】：2019-08-18 11:10:07

【问题描述】：

我有来自 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>

【问题讨论】：

添加data() return orgsData: ，然后将其用作this.orgsData = response.data并在html中使用<div v-for="review in orgsData.reviews" class="box">review.review_id</div>

【参考方案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>

希望对你有帮助！