[Solved] How to use q-toggle with @input and v-model (was: with @input and value)

[Mickey58]

I’m successfully using q-toggles to control the visibility of q-table columns. As explained in one of the q-table doc examples, this is done by having the toggles control an array that holds values that correspond to the table columns and their visibility.

Those toggles work like this.

                      <div class="col-2">
                        <q-toggle
                          v-model="visibleColumnsBaubestimmungen"
                          val="baubestimmungsTyp"
                          label="Typ"
                        />
                      </div>

This works successfully. Now I wanted to have a new toggle that controls the visiblity of multiple table columns. I have already successfully implemented this with a q-button, that, upon an @click event, executes a method that manipulates the above array (visibleColumns…) that controls the table column visibility.

Now I wanted to do the same with a q-toggle. I see in the docs that the q-toggle does not react to @click, but to @input.

So I’m trying this:

                      <div class="col-2">
                        <q-toggle
                          label="Alle/keine Normkategorien"
                          @input="toggleNormkategorien"
                          value="toggleAllNormkategorienState"
                          ref="toggleAllNormkategorien"
                          dense
                        />
                      </div>

When I click on that new toggle, the method toggleNormkategorien is called. That method successfully manipulates the above array, so the control over table column visibility is handled correctly. That method explicitly inverts/toggles the (Boolean) value of toggleAllNormkategorienState before it returns.

The remaining problem is however that the new toggle does not switch from unticked to ticked and vice versa. Although the rest of it works, it always remains in its initial “unticked” appearance.

Do I have to trigger this in my own code, and, if yes, how?

I already tried at the end of my @input method toggleNormkategorien the following:

this.$refs.toggleAllNormkategorien.toggle(); // Leads to an infinite loop!!!

which however leads to an infinite loop at runtime. Not sure which other options I have over the toggle “ticking”. Thanks for advise.

[s.molinari]

Can you show your toggleNormkategorien method?

Scott

[metalsadman]

@Mickey58 you can chain the statement in your input event or do the value change inside the method. Ie @input="toggleNormkategorien, toggleAllNormkategorienState!=toggleAllNormkategorienState".

[s.molinari]

Yeah, that’s what I wanted to make sure is missing.

In other words @Mickey58, if you use the value and @input, you are then responsible for keeping the value up-to-date.

Scott

[Mickey58]

Thanks. Indeed, I had the inverting of the Boolean variable already in my toggleNormkategorien method. I see in the logs that it is correctly “flip/flopped” - both in the case when I click on the q-button that uses it in its v-model, and when I click on the (“non-ticking”) q-toggle that I would like to get working to replace the q-button.

Here is the code of that method:

toggleNormkategorien() {
      if (!this.toggleAllNormkategorienState) {
        this.visibleColumnsBaubestimmungen.push(
          // Adds 10 "Normkategorien" to control q-table column visibility at end of array 
          "grundNorm",
          "terminologieNorm",
          "prüfNorm",
          "produktNorm",
          "verfahrensNorm",
          "dienstleistungsNorm",
          "schnittstellenNorm",
          "deklarationsNorm",
          "fachbereichsNorm",
          "werkNorm"
        );
        console.log(
          "In toggleNormkategorien mit Toggle auf EIN - visibleColumnsBaubestimmungen:",
          this.visibleColumnsBaubestimmungen
        );
      } else { // filter out those values that control column visibility from the array,
          // Filtering is needed because the array has other values in addition that can be toggled
         // and added at the end of the array
          this.visibleColumnsBaubestimmungen = this.visibleColumnsBaubestimmungen.filter(
          value =>
            value !== "grundNorm" &&
            value !== "terminologieNorm" &&
            value !== "prüfNorm" &&
            value !== "produktNorm" &&
            value !== "verfahrensNorm" &&
            value !== "dienstleistungsNorm" &&
            value !== "schnittstellenNorm" &&
            value !== "deklarationsNorm" &&
            value !== "fachbereichsNorm" &&
            value !== "werkNorm"
        );
        console.log(
          "In toggleNormkategorien mit Toggle auf AUS - visibleColumnsBaubestimmungen:",
          this.visibleColumnsBaubestimmungen
        );
      }
      this.toggleAllNormkategorienState = !this.toggleAllNormkategorienState;
      console.log(
        "Am Ende von toggleNormKategorien - toggleAllNormkategorienState neu: ",
        this.toggleAllNormkategorienState
      );

      // this.$refs.toggleAllNormkategorien.toggle(); // leads to infinite loop!!!
      // await this.$nextTick(); // needs async function above....but no effect
      // console.log("After next tick");
    },

When I chain the toggleAllNormkategorienState = !this.toggleAllNormkategorienState directly in the @input of the q-toggle, it has no effect on q-toggle ticking. So the problem is still there.

[s.molinari]

Actually, just stick with v-model and use @input to trigger what you need to do in your component. You can use the “value” given as the @input parameter to check the state of the toggle.

https://codepen.io/smolinari/pen/LYPXZJW?editors=1010

I hope that solves the predicament here.

Scott

[Mickey58]

Wow…so I tried this combination of v-model=“toggleAllNormkategorienState” and @input=“toggleNormkategorien”…which is in my view a bit “creative”…at least not what I would have expected from the docs

On the first try, I got disappointed because it did not immediately work for me (neither control for table column visibility nor the ticking of q-toggle, worse than my original combination of @input= and value=).

But the additional trick to get this combination to work was to REMOVE the inverting of the toggleAllNormkategorienState from the toggleAllNormkategorien method. So, with that super-creative combination, it seems to WORK!!! Still need to a bit more testing to be 100% sure.

Thanks a lot for your always competent and quick help.