Vuejs 2.4.4 + Laravel 5.5 apiコールからの応答のレンダリング

Question

vuejs 2.4.4を使用したAPIコールからのデータのレンダリングには問題があります。 5.4。イムを使用して呼び出しを行い、応答を得る。

これは、私は、これは私が使用しているコードである私のテンプレートに、それをレンダリングするために

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

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

を使用しているコードです：

<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は、それは、オブジェクトのさララベルの関係。 .locからのオブジェクトのjson応答を取得しています。

関係に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}} Imが取得

{ "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" 

---その正しい方法が、次のコードは、それを動作させるなかった場合、2 は分からない更新。

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

Answer 1

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

この問題は解決しました... :)