vue3+element-plus的el-checkbox 绑定值问题？

Question

<el-checkbox v-model="checked" label="Option 1" size="large" />

期望 checked 的值是 0 和 1（0 表示 true，1 表示 false）。
怎么绑定这个值呢？

---

尝试过：
<el-checkbox :value="checked" label="Option 1" size="large" />

Answer 1

Ele+的 el-checkbox 组件有一对 true-value 、false-value 属性的 👉 Checkbox 多选框 | Element Plus 多看看文档，不要自己瞎猜……

<template>
  <div>
    <el-checkbox v-model="checked" label="Option 1" size="large" :true-value="1" :false-value="0" />
    <h2>checked: {{ checked }}</h2>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(1)
</script>

---

更新

在线Demo 👉 Element Plus Playground

Answer 2

可以使用计算属性：

<script setup lang="ts">
import { ref, watch, computed, watchEffect } from "vue";

const _checked = ref(),
  checked = computed(() => (_checked.value ? 0 : 1));
</script>

<template>
  <div>
    <el-checkbox v-model="_checked" label="Option 1" size="large" />
    <p>{{ checked }}</p>
  </div>
</template>

Answer 3

<el-checkbox
    :checked="checked ? true : false"
    @change="(value) => checked = value ? 1 : 0"
    label="Option 1"
    size="large"
/>

Answer 4

<template>
  <el-checkbox :model-value="checkboxValue" @change="handleChange" label="Option 1" size="large" />
</template>

<script>
export default {
  data() {
    return {
      internalChecked: false, // 内部存储的真实布尔值
    };
  },
  computed: {
    checkboxValue: {
      get() {
        // 当获取值时，将布尔值转换为 0 或 1
        return Number(this.internalChecked);
      },
      set(value) {
        // 当设置值时，将 0 或 1 转换回布尔值
        this.internalChecked = Boolean(value);
      },
    },
  },
  methods: {
    handleChange(val) {
      // 在这里你可以直接处理逻辑，但在这里我们仅更新内部布尔值
      this.internalChecked = val;
    },
  },
};
</script>