Vuejs 将对象绑定到对象 if

Question

我的日历在时刻的帮助下创建了 41 天。

    for (let x = 0; x < 42; x++) {
        context.add(1, 'd');
        let day = {
            'date': moment(context),
            'events': []
        };
    }
    state.month = days;

然后我渲染这些日子。

        <day
             v-for="(day, index) in days"
             v-bind:day="day"
             v-bind:index="index"
             v-bind:key="day.id">
            0
        </day>

我每月从数据库中收集日事件并将它们发送到 vue。

**Event**
id
name
date
is_accepted

public static function getEventsByMonth($month) {
    return Events::whereMonth('date', '=', $month);
}

现在主要问题是：有没有一种 vue 方法可以将事件正确绑定到 days ？还是我必须在每天比较日期时循环每个事件？

编辑：

从数据库中获取事件后我的 vuestore 中的事件：

events:Object
2017-04-02 00:00:00:Object
2017-04-14 00:00:00:Object

以下是这些日子：

days:Array[42]
0:Object
1:Object

Answer 1

当您从数据库中获取事件时，您可以在后端创建一个数组（根据您的需要进行更改）：

$events = array();

foreach( $eventsFromDatabase as $event) {//$event is the event get from database
    if( !isset($event[$date]) ) {
        $events[$date] = array();
    }
    $events[$date][] = $events;
} 

return json_encode($events);

然后在 Vue 中：

<day
    v-for="(day, index) in days"
    v-bind:day="day"
    v-bind:index="index"
    v-bind:key="day.id">

   <!-- You must create the event component -->
   <event v-for="(event, index) in events[day]" :key="event"
          :id="event.id" :name="event.name" :date="event.date"
          :is-accepted="event['is_accepted']
          >

   </event>

</day>

更新：

逻辑是：对于每个day，如果事件存在，则将事件放在日组件中：

<day v-for...> HERE PUT EVENT COMPONENT </day>

在day 组件模板的定义中，您应该使用<slot></slot> 接受来自父级的html：slots。

因为您循环通过days 数组，您可以访问当天的值（不知道 moment.js 日期的键，例如 day.date），然后您可以访问正确的事件：

events[day.date] // change the .date to your needs (for moment.js)

所以你可以像这样访问事件名称：

<day v-for="(day, index) in days"...>
    <div v-if="events[day.date] !== 'undefined'">
        <event :name="events[day.date].name ...etc..></event>
    <di>
</day>