Question

有没有办法定义已检查和未检查的值。？现在VUE将模型设置为真/假，这是有道理的，但在真正的应用程序中，数据格式有些像是＆＃39; 1＆＃39; =＆GT;是的，＆＃39;＆＃39; =＆gt; false。如何在VUE中实现这一目标？

Answer 1

您可以使用true-value和false-value：

https://vuejs.org/v2/guide/forms.html#Checkbox-1

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'

Answer 2

不确定你需要什么，但正如你所说，如果你这样做：

{{ boxtest }}

<input type="checkbox" v-model="boxtest"/>

Boxtest将显示为＆＃39; true＆＃39;或者＆＃39; false＆＃39;当你选中或取消选中该框时。

如果您确实需要转换它，您可以执行以下操作：

{{ boxtest ? 1 : '' }}

Answer 3

如果需要将字段包装在组件中，则必须对代码进行一些修改。

<template>
        <div class="flex items-center h-5">
            <input
                @input="$emit('input', reversedValue)"
                :id="id"
                :value="value"
                type="checkbox"
                :checked="checked"
            />
        </div>
</template>

<script>
export default {
    props: {
        value: [Boolean, String, Number],
        trueValue: {
            type: [Boolean, String, Number],
            default: true
        },
        falseValue: {
            type: [Boolean, String, Number],
            default: false
        },
    },
    computed: {
        reversedValue() {
            return this.value === this.trueValue ? this.falseValue : this.trueValue;
        },
        checked() {
            return this.value === this.trueValue;
        }
    }
};
</script>

如何使用VUE.js为已选中和未选中的复选框定义值？

3 个答案: