[4.0.0-beta.8] TypeError: Cannot read property 'minimumRequiredPeriod' of undefined

[mariusa]

Description

When selecting dates, there's an error in console:

TypeError: Cannot read property 'minimumRequiredPeriod' of undefined
    at VueComponent.showTooltipNightlyOnClick (vueHotelDatepicker.common.js?ffea:4341)
    at VueComponent.setCustomTooltipOnClick (vueHotelDatepicker.common.js?ffea:4248)
    at VueComponent.handleDayClick (vueHotelDatepicker.common.js?ffea:4221)
    at invokeWithErrorHandling (vue.esm.js?a026:1863)
    at VueComponent.invoker (vue.esm.js?a026:2188)
    at invokeWithErrorHandling (vue.esm.js?a026:1863)
    at VueComponent.Vue.$emit (vue.esm.js?a026:3897)
    at VueComponent.dayClicked (vueHotelDatepicker.common.js?ffea:3247)
    at click (vueHotelDatepicker.common.js?ffea:2265)
    at invokeWithErrorHandling (vue.esm.js?a026:1863)

[matiasperrone]

@mariusa thanks for the feedbak, can you provide me with an example, I am not able to reproduce the error.

I am using it like this:

<template>
  <div id="app">
    <vue-hotel-datepicker style="max-width: 400px;" />
  </div>
</template>

<script>
import "vue-hotel-datepicker/dist/vueHotelDatepicker.css";
import VueHotelDatepicker from "vue-hotel-datepicker";

export default {
  name: "App",
  components: {
    VueHotelDatepicker
  }
};
</script>

[mariusa]

Here's how to replicate:

        <vue-hotel-datepicker
            style="max-width: 400px;"
            :firstDayOfWeek="hdp_config.firstDayOfWeek"
            :i18n="hdp_config.i18n"
        />

...

export default {
    components: {
        VueHotelDatepicker
    },
    data: () => ({
        hdp_config: {},
    }),

    created() {
        this.hdp_config = {
            i18n: {
                night: 'Night',
                nights: 'Nights',
                'day-names': ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
                'check-in': 'Check-in',
                'check-out': 'Check-Out',
                'month-names': [
                    'January',
                    'February',
                    'March',
                    'April',
                    'May',
                    'June',
                    'July',
                    'August',
                    'September',
                    'October',
                    'November',
                    'December',
                ],
            },
            firstDayOfWeek: 1,
        }
    },

[matiasperrone]

The problem with the data function, it can not be an arrow function, in this line:

export default {
    components: {
        VueHotelDatepicker
    },
    data: () => ({
        hdp_config: {},
    }),

It should be:

export default {
    components: {
        VueHotelDatepicker
    },
    data() {
        return {
            hdp_config: {},
        }
    },

[mariusa]

Thanks,

I changed to that and still getting the error.

[mariusa]

As you can see here, the change makes no difference in this example, as this isn't used inside data: https://stackoverflow.com/questions/48980865/vue-js-difference-of-data-return-vs-data

[superbiche]

@mariusa @matiasperrone this is due to updates in the i18n object in the v4.0 rewrite that wasn't reflected in the docs:

export default {
    "night": "Night",
    "nights": "Nights",
    "week": "week",
    "weeks": "weeks",
    "day-names": ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"],
    "check-in": "Check-in",
    "check-out": "Check-out",
    "month-names": [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
    ],
    "tooltip": {
        "halfDayCheckIn": "Available CheckIn",
        "halfDayCheckOut": "Available CheckOut",
        "saturdayToSaturday": "Only Saturday to Saturday",
        "sundayToSunday": "Only Sunday to Sunday",
        "minimumRequiredPeriod": "%{minNightInPeriod} %{night} minimum.",
    },
}

minimumRequiredPeriod is in the tooltip object which is missing from your i18n object.

I'll push a PR this weekend to update the docs accordingly.

[superbiche]

I forgot I already PR'd that, if you check the v4.0.0-dev branch the README is up to date!

[matiasperrone]

Ok Thanks @superbiche, still @mariusa shouldn't use created, You should use data instead:

Here's how:

        <vue-hotel-datepicker
            style="max-width: 400px;"
            :firstDayOfWeek="hdp_config.firstDayOfWeek"
        />

...

export default {
    components: {
        VueHotelDatepicker
    },
    data() {
        return {  hdp_config: {  firstDayOfWeek: 1 } },
    },
}

I omitted the i18n part, as it must be done according to the documentation. I hope it works now.

[matiasperrone]

@mariusa Check the Vue docs! https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

[mariusa]

Thank you both! Error solved by adding new properties documented by @superbiche

still @mariusa shouldn't use created, You should use data instead We can't as the localized data is loaded dynamically. It works fine now.