Vuejs 2.4.4 + Laravel 5.5 API 호출의 응답 렌더링

Question

vuejs 2.4.4를 사용하여 API 호출에서 데이터를 렌더링하는 데 문제가 있습니다. 및 면제 5.4. 임금을 사용하여 응답하고 응답을 얻는 Im. 그것은이다,

<div class="event-block" v-for="eventitem in events"> 
     <div class="row"> 
      <div class="col-xl-7 event-equal-height"> 
      <div class="media align-items-center"> 
       <img class="d-flex mr-3" src="/img/events/medevent-temp-100x100.png"> 
       <div class="media-body"> 
       <h4>{{ eventitem.eventname }}</h4> 
       <p> 
        {{ eventitem.eventdate }}, {{ eventitem.eventstarttime }} - {{ eventitem.eventendtime }}<br> 
        {{ eventitem.loc }} 
       </p> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

eventitem.loc는 객체입니다

이

이 내가 사용하고 코드입니다 내 템플릿을 렌더링하려면

<script> 
    export default { 
    data() { 
     return { 
     events: { 
      loc: [] 
     }, 
     eventitem: [] 
     } 
    }, 

    mounted() { 
     this.fetchEventlist(); 
    }, 
    methods: { 
     fetchEventlist() { 
     axios.get('/api/eventslist').then((response) => { 
      this.events = response.data; 
     }); 
     } 
    } 
    } 
</script> 

을 사용하고 코드입니다 laravel의 관계. 보기 인스턴트 메신저 개체에서 json 응답 .loc.

관계가있는 laravel 응답 :

나는 .loc 개체에서 데이터를 얻으려면

$events = Event::where('softdelete', 0)->whereDate('eventdate', '>', Carbon::now())->orderBy('eventdate', 'asc')->with('loc')->get(); 

     return response()->json($events); 

, 나는 eventitem.loc.name 등을 사용하려고 ...하지만 오류를 얻는 것은 객체는 0이다 내가 여기서 뭐하는거야?

미리 감사드립니다.

---- 업데이트

메신저는 오브젝트 데이터를 가져 오는 {{eventitem.loc}} 메신저를 할 때 : 내가 할 때 {{eventitem.loc.name}} 임 점점

{ "id": 2, "name": "Paradiso", "adress": "Weteringschans 6-8", "zipcode": "1017 SG", "city": "Amsterdam", "country": "Nederland", "maplong": "4.8838064999999915", "maplat": "52.3621516", "created_at": "-0001-11-30 00:00:00", "updated_at": "2017-09-12 09:13:54" } 

오류 : 그것의 올바른 방법이지만 다음과 같은 코드가 작동하게 한 경우에

[Vue warn]: Error in render function: "TypeError: Cannot read property 'name' of undefined" 

은 --- 갱신이 알고하지 마십시오.

<span v-if="eventitem.loc"> 
    {{ eventitem.loc.name }} 
</span> 

Answer 1

<span v-if="eventitem.loc"> 
    {{ eventitem.loc.name }} 
</span> 

이 문제를 해결했다 ... :)