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 方法可以将事件正确绑定到天？还是我必须在每天比较日期的情况下循环每个事件？

编辑：

从数据库中获取后，我的 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 组件中：

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

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

因为你通过数组循环days所以你可以访问一天的值(不知道 date of 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>