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

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