MDB Calendar could not props the array values in mounted met

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

modadvisor free 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 free 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 free 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Opened

Specification of the issue

ForumUser: 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

modadvisor

109Support score
22Questions 0Answers 2Snippets