Radio button binding in Vue.js

Learn how to bind a radio button in a form in Vue.js.

If you’re not using any CSS frameworks for Vue.js you need to create a custom radio button.

Let’s create a very basic example – a form that has two radio buttons “yes” and “no”.

<input type="radio" id="yes" value="true" v-model="picked">
<label for="yes">Yes</label>
<br>
<input type="radio" id="no" value="false" v-model="picked">
<label for="no">No</label>

Vue.js

new Vue({
  data: {
    picked: null
  }
})

If you want to pre-select a value, your v-model picked value should be equal to the value of the radio button, to make it selected.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-radio-button

PS: Make sure you check other Vue.js tutorials, e.g. vue.js scroll to top on route change, using jQuery with Vue.js (pros and cons).