Vue 2 Laravel 5.3 묵시적으로 객체에서 데이터를 가져올 수 없습니다.

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'); 

내가 r에 내가 {{shop.user.id}} 또는 {{shop.user.name}} 그것은 다음과 같은 오류를 기록 콘솔 할

오류 # 그러나 때, 그것은 나에게 id 및 name 등의 정보를 포함하여 사용자의 완벽하게 정상적으로 객체를 제공 내 템플릿에 {{shop.user}}을 청산 한

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

오류가 # 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)

이 결코 시간을 가지고 전에는 아주 이상한 appened. 도와주세요.

Answer 1

비동기 메서드 인 getShop 메서드에서 vm.shop을로드 할 때 vm.shop에 아무 것도 없으므로 처음에는이 오류가 발생합니다.

는 다음과 같이, v-if의 도움으로, 사용하기 전에 NULL 체크를 넣을 수 있습니다,이 오류를 방지하려면 : // vuejs :

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