VueJs2 чекбокс v-bind:true-значение не работает

Question

Я создал приложение vuejs2, используя vue-cli. Я пытаюсь привязать динамическое значение для флажка, как сказано в документации vuejs: привязка значения. Но это дает мне неопределенный. Если я не связываю vlaue, это дает мне истину или ложь. Это мой компонент 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"

Он попытается найти атрибут данных: Y в случае, если вы не определили ни одного такого атрибута, он станет неопределенным.

Если вы просто хотите, чтобы значение true было "Y", а значение false- "N", сделайте следующее:

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