[Vuejs]-Vuejs radio button binding input

by

0👍

Might be a matter of how the value is coming in. Because you set values to 0/1 the radio button model needs a 0 or 1 value, and not a true/false, can you check that that’s the case?

look at snipped below, see what changing to true does

new Vue({
  el: '#app',
  data: {
    form: {}
  },
  methods: {
    update () {
      // does not work
      //var form = { publish: true } 
      // works
      var form = { publish: 1 } // <---- are you sure it's 1 and not true?
      this.$set(this, 'form', form);
    }
  },
  
  mounted() {
    console.log(this.form)
    setTimeout(this.update, 1000)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>

<div id="app">
  <div class="form-group">
      <h5>Publish:</h5>
      <label class="radio-inline">
          <input type="radio" name="publish" class="styled" value="1" v-model="form.publish">
          Yes
      </label>
      <label class="radio-inline">
          <input type="radio" name="publish" class="styled" value="0" v-model="form.publish">
          No
      </label>
  </div>
</div>

0👍

okay my bad…. it is not a problem with vue.js but instead because i am using uniform.js for my radio button styling from admin template that i bought in themeforest and they don’t provide a clear documentation…

and after searching around i find that the javascript and css that style my radiobutton is by uniform.js and i just add a jquery code to run update the radiobutton

0👍

I have wasted few hours, and later got to know, I was missing :checked="item.isActive == true" property while binding. Adding this worked for me.

                    <input
                      class="form-check-input"
                      type="radio"
                      name="students"
                      v-model="item.isActive"
                      :checked="item.isActive== true">

Leave a comment