0

Using v-calendar version 3.0.3, I'm trying to change the attributes collection whenever a page is updated. In order to do that, I update attributes collection inside my update:pages event, and I notice that the event is called repeatedly. This is illustrated here, if you view the Console, it gets lots of update {counter} logs: https://codesandbox.io/s/vibrant-sun-7vqvj6?file=/src/App.vue

<template>
  <v-calendar :attributes="attributes" @update:pages="updatePages">
  </v-calendar>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      counter: 0,
      attributes: [],
    };
  },
  methods: {
    updatePages() {
      this.counter++;
      console.table("update " + this.counter);
      this.attributes = [];
    },
  },
};
</script>
Ian Davis
  • 19,091
  • 30
  • 85
  • 133

1 Answers1

0

It's very simple

Changing this.attributes = [] inside updatePages() causes dead loop, since your v-calendar is bound to attributes and emits update:pages every time when attributes changes.

   updatePages() {
      this.counter++;
      console.table("update " + this.counter);
      this.attributes = [];
    },

Just remove this line. You will have to find another way to do it.

UPDATE

You can prevent dead loop by checking in the updatePages() if the page was really changed, and only then update the attributes

 data() {
    return {
      counter: 0,
      attributes: [],
      lastMonth: 0
    };
  },
  methods: {
    updatePages(e) {
      if (e[0].month !== this.lastMonth) {
        console.log(`month: ${this.lastMonth} -> ${e[0].month}`);
        this.lastMonth = e[0].month;
        this.attributes = [];
      }      
    },
  },

Updated Playground

Tolbxela
  • 4,767
  • 3
  • 21
  • 42
  • Do you know how else to set the `attributes` dynamically? Thanks for your help by the way! – Ian Davis May 16 '23 at 15:33
  • Clarify, what do you want to set dynamically? – Tolbxela May 16 '23 at 16:02
  • I want to set the attributes dynamically. So if a user changes the calendar view from May to June, I want to then do an ajax request to the server to get the events that are scheduled in the database for June to render them onto the calendar. – Ian Davis May 16 '23 at 17:27