Toggle infinite loop on change

Questions
1

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.

Code

  <f7-toggle
      :checked="toggleEnabled"
      @toggle:change="onToggleChange"
   />
...
 <f7-list-input
          v-if="toggleEnabled"
> ...
 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!

2

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…):

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

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

Hope this somewhat helps you!

N.

2 Likes