MDB Calendar could not props the array values in mounted met


Topic: MDB Calendar could not props the array values in mounted method

modadvisor asked 3 years ago

Dear Sir

i am having issues with mdb vue calendar plugin. i am trying to apply my array object in mounted method but it is not able to place my data on the calendar. calendar is always blank. can you please help me to solve my issue ? please check below is my code for reference. can you please help me out. i have tried many things. Thanks

    <mdb-calendar :events="events" /></mdb-card-body>

     data() {
            return {         
                events: []
            };
        },
     methods: {
      async calander_data(data) {
                await data.forEach((value, key) => {
                    value.start = new Date(value.start);
                    value.end = new Date(value.end);
                });
                this.events = data;
                console.log(this.events);
            }
    },
async mounted() {
        await this.$http.get("api/calander").then(res => {
            this.calander_data(res.data);
        });
    },

modadvisor commented 3 years ago

Dear Sir any update please ? Thanks


Mikołaj Smoleński staff commented 3 years ago

My first idea is to add a key property to mdb-calendar and change it to any other value right after data is loaded. It should force the component to re-render.

Keep coding,Mikołaj from MDB


modadvisor commented 3 years ago

@Mikołaj Smoleński can you please give me code suggestions with example. Thanks


Mikołaj Smoleński staff commented 3 years ago

<mdb-calendar :events="events" :key="key" /></mdb-card-body>

 data() {
        return {         
            events: [],
            key: 1
        };
    },
 methods: {
  async calander_data(data) {
            await data.forEach((value, key) => {
                value.start = new Date(value.start);
                value.end = new Date(value.end);
            });
            this.events = data;
            this.key++;
            console.log(this.events);
        }
},

Keep coding, Mikołaj from MDB


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.2
  • Device: PC
  • Browser: chrome
  • OS: windows10
  • Provided sample code: No
  • Provided link: No