通过Vue-Laravel API资源连接获取打包数据 [英] Getting wrapped data via Vue-Laravel API Resource connection

问题描述

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

I'm using Laravel and Vue connected via API, Everything works fine. I asked to get offer via method from 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"
}

，然后将其放入要约变量:

and then put it into offer variable:

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

我将其用作模板

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

简单，一切正常

现在，我决定使用Laravel资源.这是将数据包装到json响应内的数据"对象中，所以我现在得到了:

Now I decided to use Laravel Resource. This is wrapping data into "data" object within json response, so I got now this:

{
     "data": {
        "body": "xx"
        "title": "yy"
     }
}

，我的模板为空-谁能告诉我如何更改代码以使用新的数据对象?以及它将如何包含更多对象时如何使用它，例如:

and my template is blank - can anyone tell me how should I change the code, to work with new data object? And how I could work with it, when It will contain more objects, like:

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

等

推荐答案

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

getOffer function should be modified to use result.data instead of raw 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)
      }
  },

现在可以再次使用

这篇关于通过Vue-Laravel API资源连接获取打包数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！