VueJs2 复选框 v-bind:true-value 不工作

Question

我使用 vue-cli 创建了一个 vuejs2 应用程序。正如 vuejs 文档所说，我正在尝试为复选框绑定动态值：value binding。但它给了我不确定的。如果我不绑定价值，它会告诉我是真还是假。这是我的 ValueBinding.vue 组件。

<template>
    <div id="input">
        <p> Selected value for smoking: {{ smoking }} </p>
        <input v-model="smoking" v-bind:true-value="Y" v-bind:false-value="N" type="checkbox">
        <label>No Smoking</label>
        <br>
        <button @click="submit">Submit</button>
    </div>
</template>
<script>
    export default {
        name: 'value-binding',
        data() {
            return {
                smoking: ''
            }
        },
        methods: {
            submit() {
                console.log(this.smoking) //shows undefined
            }
        }
    }
</script>

我是 vuejs 新手。提前致谢。

Answer 1

当您使用 v-bind 时，它会将一个或多个属性动态绑定到一个表达式。在你做

的情况下

v-bind:true-value="Y"

它会尝试在 vue 实例中找到一个 data attribute: Y，因为你没有定义任何这样的属性，它会变成未定义的。

如果您只想将真值设为 "Y"，将假值设为 "N"，请执行以下操作：

<input v-model="smoking" true-value="Y" false-value="N" type="checkbox">

VueJs2 复选框 v-bind:true-value 不工作

VueJs2 checkbox v-bind:true-value is not working

javascript

vue-component

vuejs2