F7-Vue f7-list-input(datepicker) is not updating on props changes (events prop)

Questions
1

Hi there! I’m triying to pass some events after the component mounts through prop calendar-params, but the component doesn’t seems to be updating after setting new events

<template>
    <f7-list-input type="datepicker" 
        @calendar:change="changeCalendar"  
        :calendar-params="calendarParams">
    </f7-list-input>

<script>
// mockup data
var now = new Date()
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate())

data() {
    return {
        calendarParams: {
            openIn: "popover",
            header: true,
            footer: true,
            events: [
              // this will work, if i set events on instance
              // { date: today, color: '#ff0000' }
            ],
            ...
},
methods: {
    getEvents() {
        this.store.$dispatch('fetchEvents').then(res => {
            // this won't work, updating events prop after mounting
            this.calendarParams.events.push({
                 // tried same hardcoded data and still don't works
                 // date: today
                date: new Date(res),
                color: '#ff0000'
            })
        })
    }
}
</script>
2

Parameters in F7 are immutable, so:

    <f7-list-input type="datepicker" 
        ref="listItem"
        @calendar:change="changeCalendar"  
        :calendar-params="calendarParams">
    </f7-list-input>

this.$refs.listItem.f7Calendar.params.events.push({
1 Like