How to bind radio buttons to a vuex store?

author's avatar
Kees de Kooter
Jul 10 2019 16:21 • 1 min read

The default html <input> component and most of the 3rd party component libraries rely on two-way binding and totally ignore vuex. All sample code suggests using the v-model attribute. Combined with vuex this leads to problems. Vuex will complain:

Do not mutate vuex store state outside mutation handlers

So we have set up one-way binding, while keeping the proper radio button behaviour.


    <input type="radio" name="info-source" 
        value="1" :checked="infoSource === 1" 

  computed(): {
    infoSource() {
      return this.$store.state.infoSource

This snippet does the following:

  • set the checked state based on the value of the computed field infoSource
  • update the store in the @change event