Toggle infinite loop on change

Hi all,
I have a similar issue to this thread where I could not really find a solution:

The setup
From UI perspective, there is a toggle which hides/shows another component. It seems to work fine when change is originating from UI but gets stuck in an infinite loop when value is changed during initiation.


> ...
 onToggleChange: function() {
        this.toggleEnabled = !this.toggleEnabled;
 onOpen: async function() {
        if (shouldToggleBeOn()) {
          this.toggleEnabled = true;

This is probably a common scenario and it feels like there should be a way of doing this which I completely miss.

Thanks in advance!

Hey Aidanas,

I ended up using v-model with a computed property from vuex. This is my code (I didn’t use f7-list-item as I was trying a few different solutions and didn’t need to tidy up for consistency. Pros/cons of one-man banding…):

    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">
          <div class="item-footer">View only</div>
        <div class="item-after">
          <label class="toggle">
            <input type="checkbox" @toggle:change="publish" v-model="publishedState" />
            <span class="toggle-icon"></span>

computed: {
publishedState: {
  get: function() {
    return || false;
  set: function(newValue) {
    store.commit("SET_STATE", { docID: this.docID, published: newValue });

Hope this somewhat helps you!