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

Question

我正在使用通过 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"
}

然后将其放入优惠变量中:

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

我将它用于模板

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

简单，一切正常

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

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

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

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

等等。

Answer 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)
      }
  },

现在又可以用了