vuejs set a radio button checked if statement is true

Question

I am trying to make a radio button checked using vuejs v-for only if my if-statement is true. Is there a way to use vuejs\' v-if/v-else for this type of problem?

in

Answer 1

I would like to point out a few options when dealing with radios and vue.js. In general if you need to dynamically bind an attribute value you can use the shorthand binding syntax to bind to and calculate that value. You can bind to data, a computed value or a method and a combination of all three.

new Vue({
  el: '#demo',
  data() {
    return {
      checkedData: false,
      checkedGroupVModel: "radioVModel3", //some defaul
      toggleChecked: false,
      recalculateComputed: null
    };
  },
  computed: {
    amIChecked() {
      let isEven = false;
      if (this.recalculateComputed) {
        let timeMills = new Date().getMilliseconds();
        isEven = timeMills % 2 === 0;
      }
      return isEven;
    }
  },
  methods: {
    onToggle() {
      this.toggleChecked = !this.toggleChecked;
      return this.toggleChecked;
    },
    mutateComputedDependentData() {
      this.recalculateComputed = {};
    }
  }
})

  

    

      Simple Radio Group - Only one checked at a time. Bound to data.checkedData

      Radio 1 - inverse of checkedData = {{!checkedData}}
        
      

      Radio 2 - checkedData = {{checkedData}}
        
      

      Understanding checked attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-checked
    
    

    

      Simple Radio - Checked bouned to semi-random computed object

      Radio 1: {{amIChecked}}
        
        
      Recalculate Computed Value
        Click Me Several Times
      
    
    

    

      Simple Radio Group - v-model bound value = {{checkedGroupVModel}}

      Simple Radio 1:
        
      

      Simple Radio 2:
        
      

      Simple Radio 3:
        
      
    
    

    

      Simpe Radio - click handler to toggle data bound to :checked to toggle selection

      Toggle Radio = {{toggleChecked}}