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?
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>
checked property expects boolean value, not
null or something else
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.