iNeoO / vue-meeting-selector

This component is inspired from the meeting selector from doctolib with the power of Vuejs components.
https://vue-meeting-selector.tuturu.io
95 stars 19 forks source link

TypeError: Cannot read property 'length' of undefined #6

Closed Abdus-Salam closed 4 years ago

Abdus-Salam commented 4 years ago

I have followed the full process. But in browser shows TypeError: Cannot read property 'length' of undefined. Please help me.

iNeoO commented 4 years ago

Hi, can you show your code ? or an exemple ?

Abdus-Salam commented 4 years ago
<template>
  <vue-meeting-selector
    v-model="meeting"
    :date="date"
    :loading="loading"
    :meetings-days="meetingsDays"
    @next-date="nextDate"
    @previous-date="previousDate"
  />
</template>

<script>
import VueMeetingSelector from "vue-meeting-selector";

export default {
  components: {
    VueMeetingSelector
  },
  data() {
    return {
      date: new Date(),
      meeting: null,
      loading: false,
      meetingsDays: []
    };
  },
  methods: {
    getMeetings(date) {
      // methods who return the meetings
    },
    async nextDate() {
      this.loading = true;
      const date = new Date(this.date);
      date.setDate(date.getDate() + 7);
      this.meetingsDays = await this.getMeetings(date);
      this.date = date;
      this.loading = false;
    },
    async previousDate() {
      this.loading = true;
      const date = new Date(this.date);
      date.setDate(date.getDate() - 7);
      this.meetingsDays = await this.getMeetings(date);
      this.date = date;
      this.loading = false;
    }
  },
  async created() {
    this.loading = true;
    this.meetingsDays = await this.getMeetings(this.date);
    this.loading = false;
  }
};
</script>
iNeoO commented 4 years ago

Ok this is just an exemple, you need to complete getMeetings(date) with a function who will generate/get from your backend meetingsSlots

interface MeetingSlot {
  date: Date | string;
  [key: string]: any;
}

if you want to do it from frontend, you can draw inspiration from the one I did to generate the examples (it's write in ts) https://github.com/iNeoO/vue-meeting-selector/blob/master/src/helpers/slotsGenerator.ts args are

  date: Date, // startingDate
  nbDays: number, // nB days to generate
  startTime: Time, // first meeting starting time
  endTime: Time, // last meeting starting time
  interval: number, // interval between 2 meetings
  randomSlotsToDelete = 0, // randomly delete some meetings, you should let this to 0