[Vuejs]-Vuejs bind object to object if

by

0👍

✅

You can create an array in back-end when you get events from database (change to your need) :

$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);

And then in 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>

UPDATED :

The logic is : for each day, you put event inside the day component if event existed :

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

In the definition of day component template you should use <slot></slot> to accept html from parent : slots.

Because you loop trough days array you can access the value of the day (don’t know the key for date of moment.js, like day.date for example) and then you can access to the right event with :

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

So you can access to the event name like this :

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

Leave a comment