I need to make a table of bookings (the hours are the y, the slots (actually tennis courts) the x).

  • I will populate an array from my database with the already occupied slots (court 5 at 5PM,...);

  • I'll then loop trough all possibilities (from 7AM to 12PM and for each hour, every slots) and put the booking's name when taken, and put a button when it's not.

I can't figure out how to structurate my data;

In Php I had an array like $bookings[$hour][$court] which, when not empty, should contain the booking name (in the php nested loops (hours and courts), I checked if $bookings[$hour][$court] was empty (and then display the content if any or a button otherwise).

I hope I'm clear enough...

Thank you all !


I tried that way:

new Vue({
  el: '#app',
  data: {
     bookings: [
        hour: '1',
        court: '3',
        name: 'Laurent'
        hour: '2',
        court: '2',
        name: 'Gaspard'



<script src="https://unpkg.com/vue"></script>

<div id="app">
<tr v-for="hour in (7, 24)" :key="hour">
  <td v-for="court in (1,6)" :key="court">
    <div v-if="">


But I don't kow how to link the data to the template...

1 Answers

JasonB On Best Solutions

You could create a method that filters the bookings by the court and hour indexes in your loop.

methods: {
    getBookings( hour, court ) {
        return this.bookings.filter( booking => booking.hour == hour && booking.court == court );

This returns an array of appointments so I'd use v-for instead of v-if. This means less code in the js, you don't have special code to handle the case where the returned array is empty, and your code will show if you have double bookings.

<div v-for="booking in getBookings( hour, court )" >
    {{ booking.name }}