Quasar q-toggle组件无法响应v-model绑定值问题求助

核心原因 #

Quasar的q-toggle组件默认期望v-model绑定的是布尔值（true/false），但你绑定的output.level是数字类型的1/0，组件无法正确识别对应状态，因此出现了中间过渡状态。

解决方案 #

方法1：指定组件的true/false对应值 #

直接通过true-value和false-value属性，将组件的选中/未选中状态与数字1/0做映射。如果是数字类型，需要用:v-bind（简写为:）绑定：

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

方法2：将数字转为布尔值绑定 #

利用双感叹号!!把output.level快速转为布尔值后再绑定，同时在回调方法里转回数字：

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

方法3：统一数据类型 #

如果业务允许，直接把output.level的初始值和后续更新都改为布尔值（true对应原1，false对应原0），这样组件就能正常识别状态。

额外检查点 #

• 确认output.level的初始值确实是1或0，不是undefined、null等非预期值
• 检查sendOutputPost方法中是否有修改output.level的逻辑，导致值出现异常

内容的提问来源于stack exchange，提问作者SashoSTZ