Quasar q-toggle 未根据 v-model 显示

【问题标题】：Quasar q-toggle not showing according to v-modelQuasar q-toggle 未根据 v-model 显示
【发布时间】：2022-11-28 17:40:06
【问题描述】：

我在添加带有 v-model 的 q-toggle 时遇到了困难，并且该切换没有响应实际的 v-model。我这样使用它：

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

切换保持在中间：

相反，它应该分别响应绿色和灰色圆圈 1 和 0。

【问题讨论】：

标签： vue.js togglebutton quasar v-model

【解决方案1】：

为了使其工作，q-toggle 在我的例子中需要一个字符串值 output.level 是一个整数。我将原始数组映射为仅将级别作为字符串，并发现 q-toggle 标签需要真值和假值，如下所示：

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})"
/>

【讨论】：