vue.js 根据v模型,类星体q切换未显示

fnvucqvd  于 2022-11-30  发布在  Vue.js
关注(0)|答案(1)|浏览(167)

我很难在v-model中添加q-toggle,而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。

b4lqfgs4

b4lqfgs41#

为了让它工作,q-toggle在我的case输出中需要一个字符串值。level是一个整数。我Map了原始数组,只有level作为字符串,发现q-toggle标签需要true值和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})"
/>

现在一切正常,如下所示:

相关问题