Showing events on a multi room scheduler
I asked you how you would do it in jQuery and you said that you would do something like:


$.each(events, function(event){
    var el = $("&lt;div&gt;&lt;/div&gt;")
        .addClass("event")
        .css({ "height": event.duration + "px", "top": event.start + "px" })
        .text(event.title);
    $('.room').data('place', event.place_id).append(el);
});



And sure, this would only loop through the events array once. But what happens in every iteration? It does a jQuery search for $('.room').data('place', event.place_id), which is not a constant-time lookup operation, so this approach might be slower than what you think it is.



Now, for your Vue approach. You said:


  maybe I need to do it on backend to make a rooms array look like that: { id: 1, title: 'Room 1', events: [{ id: 1, title: 'Event 1', start: 90, duration: 30 }] } 


And yes, I agree with this. Putting the events inside your rooms makes much more sense.

As for your Vue template, overall the code looks fine. I'm not a CSS expert so I don't know if there's something you can improve there, but there probably is. Maybe consider using CSS Grids, where each room could be one column, and time-slots could be rows? The current approach of having 1px = 1 minute seems a bit unnatural to me.

As for this part:

&lt;div class="room" v-for="room in rooms" :key="room.id"&gt;
  &lt;span&gt;{{ room.title }}&lt;/span&gt;
  &lt;div class="event" 
    :style="{ top: event.start + 'px', height: event.duration + 'px'}" 
    v-for="event in events" 
    v-if="event.room_id === room.id"&gt;
  &lt;h5&gt;{{ event.title }}&lt;/h5&gt;
&lt;/div&gt;


The only thing I would change is to put v-for and v-if before your :style-binding, as they are more important to be aware about, this is mostly my personal opinion though.

&lt;div class="room" v-for="room in rooms" :key="room.id"&gt;
  &lt;span&gt;{{ room.title }}&lt;/span&gt;
  &lt;div class="event" 
    v-for="event in events" 
    v-if="event.room_id === room.id"
    :style="{ top: event.start + 'px', height: event.duration + 'px'}" 
    &gt;
  &lt;h5&gt;{{ event.title }}&lt;/h5&gt;
&lt;/div&gt;


It would be nicer if your events would be inside the rooms, as then you could write:

&lt;div class="room" v-for="room in rooms" :key="room.id"&gt;
  &lt;span&gt;{{ room.title }}&lt;/span&gt;
  &lt;div class="event" 
    v-for="event in room.events" 
    :style="{ top: event.start + 'px', height: event.duration + 'px'}" 
    &gt;
  &lt;h5&gt;{{ event.title }}&lt;/h5&gt;
&lt;/div&gt;


I would recommend in the future to use a Room component and a RoomEvent component so that you could write:

&lt;Room v-for="room in rooms" :key="room.id" /&gt;


And the room-component:

&lt;div class="room"&gt;
  &lt;span&gt;{{ room.title }}&lt;/span&gt;
  &lt;RoomEvent v-for="event in room.events" /&gt;
&lt;/div&gt;


I think that the &lt;h5&gt;{{ event.title }}&lt;/h5&gt; belongs inside the RoomEvent



Overall a nice job!