how to avoid infinite loop on data change (month view)

[ValB2021]

Hello!
I’m working with slots to change the appearance and functions of my QCalendar.
As soon as a method is called from the slot which increments a counter or calls an array.push(), I get this error message:
[Vue warn]: You may have an infinite update loop in a component render function.
found in
—>

at src/components/QuasarCalendarTest.vue
at src/pages/Dashboard.vue

at src/layouts/MainLayout.vue
at src/App.vue

Because of the rerender, the displayed month is run through over and over an infinite number of times from start to finish.
How can the infinite loop be avoided?
I am grateful for any assistance.:)
VB

To clarify my request here is the source code:

[hawkeye64]

@ValB2021 What version? I may need a CodePen as this doesn't look much different than some of the examples.

[ValB2021]

Hello hawkeye64,
version:
"@quasar/quasar-ui-qcalendar": "^3.3.4",
"@quasar/quasar-app-extension-qcalendar": "^3.3.4",
I tried it with code from your examples:
QCalendar->Slot(day)-> method getEvents (dt)

[ValB2021]

error message, when counterFoo is added:

[ValB2021]

thanks for your help in advance:)

[hawkeye64]

Seems like this is an issue with understanding Vue. When you do certain things in a function related to the data it's using, then you're telling Vue to re-run the render if that data changes.

You can remove your counterFoo from the return in data() and make it global as in this pen: https://codepen.io/Hawkeye64/pen/oNWLRpB where you will see it only renders for each day.

Basically, anything returned in:

  data () {
    return {
      date: '',
      version: QCalendar.version,
      counterFoo: 0
    }
  },

will get a ref on it and when it changes, causes a re-render.

[ValB2021]

Thank you very much!!! You have opened my eyes.:)
I am still at the beginning with Vue, but had a feeling that the return triggers the rerender.

[hawkeye64]

The best thing to remember with slots is, for the most part, your code should be inline or use computed. Once in a while, you can get away with using functions, but not if they provide user actions. And, not all of your data needs to be reactive in the data () method.

[ValB2021]

thank you very much for these helpful hints!