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

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

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

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

• javascript
• vuejs2
• vue-ponent

Share Improve this question Follow edited Jul 14, 2022 at 2:39 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Dec 10, 2016 at 14:53 hasib32hasib32 83511 gold badge1414 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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