Question

我在使用vuejs 2.4.4从api调用渲染数据时遇到了一些麻烦。和laravel 5.4。我正在使用axios进行通话并获得响应。

这是我使用

的代码

<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是一个对象，它是laravel中的一个关系。在视图中我从.loc获取对象json响应。

与关系的laravel反应：

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

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

我想从.loc对象获取数据，我试图使用eventitem.loc.name等...但是得到对象为0的错误。我在这里做错了什么？

提前致谢！

----更新

当我正在做{{eventitem.loc}}我获取对象数据时：

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

当我{{eventitem.loc.name}}时，我收到错误：

[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>

这确实解决了问题......：）

Vuejs 2.4.4 + Laravel 5.5从api调用渲染响应

1 个答案: