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

Maybe someone finds this approach helpful:

In template I assign each radio button a value:

<input type="radio" value="1" v-model.number="someProperty">
<input type="radio" value="2" v-model.number="someProperty">

Then in the component I set the value, i.e:

data: function () {
    return {
        someProperty: 2
    }
}

And in this case vue will select the second radio button.

Answer 2

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 = {};
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="demo">
  <div>
    <div>
      <span>Simple Radio Group - Only one checked at a time. Bound to data.checkedData</span><br>
      <label>Radio 1 - inverse of checkedData = {{!checkedData}}
        <input type="radio" name="group1" value="radio1" :checked="!checkedData">
      </label><br>
      <label>Radio 2 - checkedData = {{checkedData}}
        <input type="radio" name="group1" value="radio2" :checked="checkedData">
      </label><br>
      <span>Understanding checked attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-checked</span>
    </div>
    <br>
    <div>
      <span>Simple Radio - Checked bouned to semi-random computed object</span><br>
      <label>Radio 1: {{amIChecked}}
        <input type="radio" :checked="amIChecked">
      </label> &nbsp;
      <label>Recalculate Computed Value
        <button type="button" @click="mutateComputedDependentData">Click Me Several Times</button>
      </label>
    </div>
    <br>
    <div>
      <span>Simple Radio Group - v-model bound value = {{checkedGroupVModel}}</span><br>
      <label>Simple Radio 1:
        <input type="radio" name="vModelGroup" value="radioVModel1" v-model="checkedGroupVModel">
      </label><br>
      <label>Simple Radio 2:
        <input type="radio" name="vModelGroup" value="radioVModel2" v-model="checkedGroupVModel">
      </label><br>
      <label>Simple Radio 3:
        <input type="radio" name="vModelGroup" value="radioVModel3" v-model="checkedGroupVModel">
      </label>
    </div>
    <br>
    <div>
      <span>Simpe Radio - click handler to toggle data bound to :checked to toggle selection</span><br>
      <label>Toggle Radio = {{toggleChecked}}
        <input type="radio" :checked="toggleChecked" @click='onToggle()'>
      </label>
    </div>
  </div>
</div>

Answer 3

You can follow below option if you can adjust with your logic:

<div class="combination-quantity">
    <input type="radio" value="Lost" 
    v-model="missing_status">
    <label for="lost">Lost</label>
    <br>
    <input type="radio" value="Return Supplier" v-model="missing_status">
    <label for="return_supplier">Return Supplier</label>
</div>

Value for missing_status could be "Lost" or "Return Supplier" and based on the value radio option will be get selected automatically.

Answer 4

You could bind the checked attribute like this:

<div v-for="portal in portals">
  <input type="radio"
         id="{{portal.id}}"
         name="portalSelect"
         v-bind:value="{id: portal.id, name: portal.name}"
         v-model="newPortalSelect"
         v-on:change="showSellers"
         :checked="portal.id == currentPortalId">

  <label for="{{portal.id}}">{{portal.name}}</label>
</div>

Simple example: https://jsfiddle.net/b4k6tpj9/