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

Question

我在添加带有 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。

Answer 1

为了让它工作，q-toggle 需要一个字符串值，在我的例子中 output.level 是一个 integer。我将原始数组映射为只有级别的字符串，发现 q-toggle 标签需要 true-value 和 false-值如下所示：

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

现在一切正常，看起来像这样：