Question

到目前为止，Vue2对我来说一直很有说服力，但除了这一点，我很难调试。

商店-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}}或{ {1}}它控制日志错误如下

错误＃1

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

错误＃2

未捕获的TypeError：无法读取属性＆＃39; id＆＃39;未定义的在Proxy.render（eval at（app.js：335），：46：47）在VueComponent.Vue._render（eval at（app.js：444），：3096：22）在VueComponent.eval（eval at（app.js：444），：2464：21）在Watcher.get（eval at（app.js：444），：1663：27）在新的Watcher（eval at（app.js：444），：1655：12）在VueComponent.Vue._mount（eval at（app.js：444），：2463：19）在VueComponent.Vue $ 3. $ mount（eval at（app.js：444），：6104：15）在VueComponent.Vue $ 3. $ mount（eval at（app.js：444），：8494：16）在init（eval at（app.js：444），：2777：11） at createComponent（eval at（app.js：444），：4120：9）

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

Answer 1

当您从vm.shop方法加载getShop时，这是一种异步方法，在vm.shop之前您将无法获得任何内容，直到填充为止，因此您最初会收到此错误。

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

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

Vue 2 Laravel 5.3 Eloquent无法从对象

1 个答案: