Vue 2 Laravel 5.3 Eloquent 无法从对象中检索数据

Question

到目前为止，Vue2 对我来说已经很好地阅读了 eloquent，但除了这一点我很难调试。

Shop-show.vue

<template>
.....
.....
    <div class="row">
      {{shop.user.id}}
    </div>
.....
.....
</template>

<script>
  export default{
    mounted(){
        this.getShop()
    },
    methods:{
        getShop(){
            var vm = this
        vm.$http.get('/getShop/'+vm.shopId).then((response)=>{
            vm.shop = response.data.data.shop
        })
    },
.....
.....
 }
</script>

ShopController.php

.....
.....
    public function getShop($id)
    {
      $shop = Shop::where('id',$id)->with('user')->firstOrFail();
      $response = [
          'data' => [
              'shop' => $shop
          ]
      ];
      return response()->json($response);
    }
.....
.....

web.php

Route::get('/getShop/{id}', 'ShopController@getShop');

在这里，当我在模板中渲染 {{shop.user}} 时，它给了我非常好的用户对象，包括 id 和 name 等信息，但是当我执行 {{shop.user.id}} 或 {{shop.user.name}} 时，控制台日志错误如下

错误#1

[Vue 警告]：在渲染组件时出错 /Applications/XAMPP/xamppfiles/htdocs/soyegg/resources/assets/js/components/Shop/Shop-show.vue：

错误#2

未捕获的类型错误：无法读取未定义的属性“id” 在 Proxy.render （评估在 (app.js:335), :46:47） 在 VueComponent.Vue._render （评估在（app.js:444），：3096:22） 在 VueComponent.eval (eval at (app.js:444), :2464:21) 在 Watcher.get (eval at (app.js:444), :1663:27) 在新的观察者处（评估在 (app.js:444), :1655:12） 在 VueComponent.Vue._mount (eval at (app.js:444), :2463:19) 在 VueComponent.Vue$3.$mount（评估在 (app.js:444), :6104:15） 在 VueComponent.Vue$3.$mount（评估在（app.js:444），：8494:16） 在初始化（评估在（app.js：444），：2777：11） 在 createComponent (eval at (app.js:444), :4120:9)

这从未发生过，非常奇怪。请帮忙。

Answer 1

当您从getShop 方法（这是一个异步方法）加载vm.shop 时，在填充vm.shop 之前您将没有任何内容，因此最初您会收到此错误。

为防止出现此错误，您可以在使用它之前进行空检查，在v-if 的帮助下，如下所示：

<template>
.....
.....
    <div class="row" v-if="shop && shop.user">
      {{shop.user.id}}
    </div>
.....
.....
</template>