Question

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

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

我收了这个：

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

然后将其放入offer变量：

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

我用它进入模板

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

简单，一切正常

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

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

我的模板是空白的 - 任何人都可以告诉我如何更改代码，使用新的数据对象？当它包含更多对象时，我如何使用它，如：

import { Url } from ...

export const FetchRequest = function (_onSuccess, _onFailure) {
    fetch(Url)
        .then((response) => response.json())
        .then((responseJson) => {
            if (responseJson.status == 'success') {
                _onSuccess(responseJson);
            }
            else {
                _onFailure(responseJson);
            }
        })
        .catch((error) => {
           alert('Error!');
  });
};

等。

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

现在再次运作

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

1 个答案: