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：slots。

因为您通过days数组循环，所以您可以访问当天的值（不知道当前日期的关键字。例如，例如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>

如果，Vuejs将对象绑定到对象

1 个答案:

更新：