Setting f7 toggle on mount causes infinite loop

#1

Hey all,

I’m wanting to set a vue toggle on load based on a value I’m retrieving from Firebase. My toggle is pretty straight forward.

<f7-toggle :checked="published" @toggle:change="publishToggle"></f7-toggle>

In my data default property I have published: null, and on mount I am setting it to either true or false once the value is retrieved however this is what then triggers the infinite loop. How should I set the checked state on load with it the change function running?

Thanks!

Toggle infinite loop on change
#2

In your publishToggle method i guess you do some assignment to published property, try to check before assignment that it is different.

Otherwise you may just not render it when you don’t have data:

<f7-toggle v-if="published !== null" :checked="published" @toggle:change="publishToggle"></f7-toggle>

But anyway, checked property expects boolean value, not null or something else

#3

Hey @nolimits4web - thanks for your response on this. Your solution would work if I didn’t need to display the toggle. As you correctly assumed, I am wanting to set the checked state based on a value, which I’m simply doing when the page is mounted with
this.published = doc.data().public

I’ll try creating the toggle dynamically instead.

1 Like