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不起作用

1 个答案: