Vue 2 Laravel 5.3 Eloquent kann Daten vom Objekt nicht abrufen

Question

Vue2 hat bisher ziemlich gut eloquent gelesen, außer für diesen Punkt, wo ich Probleme habe zu debuggen.

Geschäfte 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'); 

hier, wenn ich r ender {{shop.user}} in meiner Vorlage es mich völlig in Ordnung Objekt der Benutzer gibt Informationen einschließlich wie id und name, aber wenn ich {{shop.user.id}} oder {{shop.user.name}} es Fehler wie folgenden

log Konsole

Fehler # 1

[Vue warn]: Error when rendering component at /Applications/XAMPP/xamppfiles/htdocs/soyegg/resources/assets/js/components/Shop/Shop-show.vue:

Fehler # 2

Uncaught TypeError: Cannot read property 'id' of undefined at Proxy.render (eval at (app.js:335), :46:47) at VueComponent.Vue._render (eval at (app.js:444), :3096:22) at VueComponent.eval (eval at (app.js:444), :2464:21) at Watcher.get (eval at (app.js:444), :1663:27) at new Watcher (eval at (app.js:444), :1655:12) at VueComponent.Vue._mount (eval at (app.js:444), :2463:19) at VueComponent.Vue$3.$mount (eval at (app.js:444), :6104:15) at VueComponent.Vue$3.$mount (eval at (app.js:444), :8494:16) at init (eval at (app.js:444), :2777:11) at createComponent (eval at (app.js:444), :4120:9)

hat dies nie h vorhin angetan, sehr komisch. Bitte helfen Sie.

Answer 1

Wie Sie laden vm.shop von getShop Methode, die eine asynchrone Methode ist, haben Sie nichts in bis es ausgefüllt ist, so dass Sie zunächst diesen Fehler erhalten.

diesen Fehler zu vermeiden, können Sie eine NULL-Prüfung vor dem Einsatz setzen können, mit Hilfe von v-if, wie folgt vor:

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