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

Question

I have created a vuejs2 app using vue-cli. I'm trying to bind dynamic value for checkbox as vuejs documentation said: value binding. But its giving me undefined. If I don't bind vlaue its giving me true or false. This is my ValueBinding.vue component.

<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>

I'm new to vuejs. Thanks in advance.

Answer 1

When you use v-bind, it dynamically bind one or more attributes to an expression. In your case when you do

v-bind:true-value="Y"

It will try to find a data attribute: Y in vue instance, as you have not defined any such attribute, it will become undefined.

If you just want to true-value as "Y" and false-value as "N", do follwing:

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