使用具有关系的 laravel 使用 Vuejs 获取数据时没有检索数据答案

【问题标题】：No retrieving data when fetching data with Vuejs using laravel with relationship使用具有关系的 laravel 使用 Vuejs 获取数据时没有检索数据
【发布时间】：2019-10-19 11:46:36
【问题描述】：

在控制器中，响应正常 200

return = CustomerRequest::with('item')->paginate(5);

在模型类中

public function item()
{
    return $this->belongsTo('App\Item');
}

在 Vuejs 模板中

data() {
    columns: {},
},
methods: {
    getData() {
        axios.get('/api/customerRequest')
             .then(response => {
                  this.columns = response.data;
              });
    }
}


<tr v-for="column in columns" :key="column.id">
<td>{{column.id}}</td>
<td>{{column.item.title}}</td>
...
</tr>

我收到一个错误：

TypeError：“column.item 为空”

【问题讨论】：

您使用的是return = CustomerRequest::with('item')->paginate(5); 或return CustomerRequest::with('item')->paginate(5);？
不等于 = :)
执行console.log(response.data) 并检查响应负载中项目的值
我这样做的输出是 json object 0{ id : 1 name: admin item: { id:1 title: some } 我无法访问项目

标签： php laravel vue.js eloquent axios

【解决方案1】：

你在设置this.columns时有一个类型。

更新this.colums = response.data;：

methods: {
  getData(){
  axios.get('/api/customerRequest').then(response => {
    this.columns = response.data;
  });
}

【讨论】：