vue js doesn't show props component properly

Question

I built a component with a 'date' property called datesel :

<booking-table :datesel="23-05-2019"></booking-table>

I tried to display it in my component but instead of displaying the above date, it prints -2001

My component is below:

<template>
  <div id="bookingTable">
   <table align="center">
    <tr>
      <th width="100" align="center">Heure / terrain {{ datesel }}</th>
    <th v-for="court in (1,6)" :key="court" align="center">
    {{ court }}
    </th>
    </tr>
    <tr v-for="hour in hours" :key="hour" class="tableLine">
      <th align="center">{{ hour | formatHeure }}</th>
      <td v-for="court in courts" :key="court" align="center">
        <template v-if="isItFree( hour, court )">
          <button class="btn btn-primary"  data-toggle="modal" data-target="#bookModal" v-on:click="setCourtData(hour, court)">Réserver</button>
        </template>
        <template v-for="booking in getBookings( hour, court )">
          {{ booking.name }}
        </template>
      </td>
    </tr>
  </table>
  <modal-book :chosenCourt="chosenCourt" :chosenHour="chosenHour"></modal-book>
</div>
</template>

<script>
    import modalBookComponent from './modalBookComponent.vue';
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data: function () {
            return {
                bookings: [{
                    hour: '7',
                    court: '3',
                    name: 'Laurent'
                  },
                  {
                    hour: '8',
                    court: '2',
                    name: 'Gaspard'
                  },
                  {
                    hour: '13',
                    court: '3',
                    name: 'Charline'
                  },
                  {
                    hour: '7.5',
                    court: '3',
                    name: 'Audrey'
                  }
                ],
                chosenCourt: '0',
                chosenHour: '0',
                hours: [
                  '7',
                  '7.5',
                  '8',
                  '9',
                  '10',
                  '11',
                  '12',
                  '13',
                  '14',
                  '15',
                  '16',
                  '17',
                  '18',
                  '19',
                  '20',
                  '21',
                  '22',
                  '23'
                ],
                courts : [
                  '1',
                  '2',
                  '3',
                  '4',
                  '5',
                  '6'
                ]
            }
        },
         methods: {
            getBookings(hour, court) {
              return this.bookings.filter(booking => booking.hour == hour && booking.court == court);
            },
            isItFree(hour, court) {
              var booking = this.bookings.filter(booking => booking.hour == hour && booking.court == court);
              if (!booking.length) {
                return true;
              } else {
                return false;
              }
            },
            setCourtData(hour, court) {
              this.chosenCourt = court;
              this.chosenHour = hour;
            }
        },
        components: {
            modalBook: modalBookComponent
        },
        filters: {
          formatHeure: function (value) {
            value = value + 'h00';
            return value.replace('.5h00', 'h30');   
        }
      },
      props: {
          datesel: String
        }
    }
</script>

Could you tell me what I'm missing ?

Than you all

Answer 1

You're passing in an expression (23 - 05 - 2019).

To get the correct output you either pass it in like so:

datesel="23-05-2019" (without :)

or

:datesel="'23-05-2019'" (wrapping the input parameter with ').

This is because using : evaluates the input parameter as a JavaScript expression, instead of a string. This would be great if you're passing in a Date type for example, but in your string example you could essentially skip it and get the same output!

The Vue docs (which are great!) have a section on it: https://v2.vuejs.org/v2/guide/components-props.html.