How to use v-model with checkbox in vue.js?

Question

In vue2 js, I want to use a checkbox with a v-model.

<input type="checkbox" value="test" :checked="selected"/>

I want the value of the checkbox to be test , however I want the 2 way binding with the prop called selected which is a boolean. However the above only does 1 way binding. How can I fix this?

Thanks

Answer 1

Use v-model instead of :checked

 new Vue({ el: '#app', data: { selected: false } });

 <script src="https://unpkg.com/vue@latest/dist/vue.js"></script> <div id="app"> <input type="checkbox" value="test" v-model="selected"> <div>Selected: {{selected}}</div> </div>