Question

我正在构建SPA，其中Vue组件负责获取项目并显示相关信息。我在创建Vue组件时得到一个项目，并将其加载到数据中的相应对象中，如下所示：

created(){
    axios.get('/projects/' + this.$route.params.slug)
        .then(response => this.project = response.data);
},

其中

data() {
    return {
        project: {}
    }
},

然后我尝试显示该项目的标题：

<h1 v-text="project.item.title"></h1>

从服务器发送的数据如下所示：

return Response::json([
    'item' => $project,
], 200);

我在后端使用Laravel，因此返回了一个集合（$ project）：

Project {#190 ▼
  #label: array:1 [▶]
  #fillable: array:5 [▶]
  #connection: "mysql"
  #table: null
  #primaryKey: "id"
  #keyType: "int"
  +incrementing: true
  #with: []
  #perPage: 15
  +exists: true
  +wasRecentlyCreated: false
  #attributes: array:7 [▼
    "id" => 1
    "title" => "test"
    "link" => "test"
    "description" => "<p>test</p>"
    "image" => "1493112569-break-into-your-heart.jpg"
    "created_at" => "2017-04-25 09:25:21"
    "updated_at" => "2017-04-25 09:29:29"
  ]
  #original: array:7 [▶]
  #casts: []
  #dates: []
  #dateFormat: null
  #appends: []
  #events: []
  #observables: []
  #relations: []
  #touches: []
  +timestamps: true
  #hidden: []
  #visible: []
  #guarded: array:1 [▶]
}

具体而言，响应中的item返回如下：

"item": {
    "id": 1,
    "title": "test",
    "link": "test",
    "description": "<p>test</p>",
    "image": "1493112569-break-into-your-heart.jpg",
    "created_at": "2017-04-25 09:25:21",
    "updated_at": "2017-04-25 09:29:29"
},

现在发生的事情是标题已成功显示在页面上，但我也收到如下错误：

[Vue warn]: Error in render function: 
TypeError: _vm.project.item is undefined

这也导致我的其余脚本失败。知道为什么它清楚地在项目对象中显示信息但是仍在吐出错误？

我还可以在页面加载/转换时在Vue DevTools中看到带有相关加载属性的项目对象。

显示提取的数据时出错

0 个答案: