通过 Vue-Laravel API 资源连接获取包装数据

Posted 2023-03-15

【中文标题】通过 Vue-Laravel API 资源连接获取包装数据

【英文标题】：Getting wrapped data via Vue-Laravel API Resource connection

【发布时间】：2018-07-07 11:19:48

【问题描述】：

我正在使用通过 API 连接的 Laravel 和 Vue， 一切正常。 我要求通过 Vue 的方法获得报价：

      getOffer(id) 
              this.$http.get('http://127.0.0.1:8000/api/offers/'+id)
                  .then(response => response.json())
                  .then(result => this.offer = result)
          
      ,

我收到了这个：

"body": "xx"
"title": "yy"

然后放入offer变量中：

    data() 
        return 
            offer: 
                title:'',
                body:''
            
        
    ,

我将它用于模板

            <div>
              <h3 class="headline mb-0">offer.title</h3>
              <div>
                <br>
                offer.body</div>
            </div>

简单，一切正常

现在我决定使用 Laravel 资源。这是将数据包装到 json 响应中的“数据”对象中，所以我现在得到了这个：

     "data": 
        "body": "xx"
        "title": "yy"
     

我的模板是空白的 - 谁能告诉我应该如何更改代码以使用新的数据对象？以及我如何使用它，何时它将包含更多对象，例如：

 
     "data": 
        "body": "xx"
        "title": "yy"
     ,
     "data2":
        "body": "xx"
        "title": "yy"
     ,

等等。

【参考方案1】：

getOffer 函数应修改为使用result.data 而不是原始result：

  getOffer(id) 
          this.$http.get('http://127.0.0.1:8000/api/offers/'+id)
              .then(response => response.json())
              .then(result => this.offer = result.data)
      
  ,

现在又可以使用了