Quasar q-toggle not showing according to v-model

Question

I struggle with adding a q-toggle with v-model, and the toggle is not responding to the actual v-model. I use it like this:

<q-toggle
          v-model="output.level"
          checked-icon="check"
          color="green"
          unchecked-icon="clear"
          @update:model-value="sendOutputPost({'channel':output.channel,'level':output.level})"
        />

The toggle stays in the middle:

Instead it should be responing to the green and gray circles respectively 1 and 0.

Answer 1

In order this to work, q-toggle expects a string value in my case output.level is an integer. I mapped the original array with only the level as string and found out that the q-toggle tag wants true-value and false-value like shown below:

outputs: {
      get() {
        let returnOutput;
        let outputs = this.$store.getters["inputOutput/getOutputs"];
        if (outputs) {
          returnOutput = outputs.map((item) => {
            return {
              channel: item.channel,
              level: item.level.toString(),
            }
          })
        }   
          return returnOutput;
      },
    }
  },




<q-toggle
  v-model="output.level"
  true-value="1"
  false-value="0"
  checked-icon="check"
  color="green"
  unchecked-icon="clear"
  @update:model-value="sendOutputPost({'channel':output.channel,'level':output.level})"
/>

And now everything works properly and looks like this: