Vuejs 2.4.4 + Laravel 5.5渲染来自api调用的响应

Question

I'm having some trouble with rendering data from a api call with vuejs 2.4.4. and laravel 5.4. Im using axios to make the call and get the response.

This is the code i'm using

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

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

To render it to my template this is the code i'm using:

<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 is a object, it's a relation in laravel. In the view im getting the object json response from .loc.

The laravel response with relationship:

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

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

I want to get the data from the .loc object, i tried to use eventitem.loc.name etc... but getting errors that the object is 0. What am i doing wrong here?

Thanks in advance!

---- Update

When im doing {{ eventitem.loc }} im getting the object data:

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

When i do {{ eventitem.loc.name }} Im getting the error:

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

--- update 2 Don't know if its the correct way but the following code did make it work.

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

Answer 1

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

this did fix the problem... :)