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 php and html I can achieve this by doing the following:

<input type="radio" <? if(portal.id == currentPortalId) ? 'checked="checked"' : ''?>>

Below is what I have so far using vuejs:

    <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"
       v-if="{{portal.id == currentPortalId}}"
       checked="checked">
     <label for="{{portal.id}}">{{portal.name}}</label>
    </div>

I know the v-if statement here is for checking whether to show or hide the input.

Any help would be very much appreciated.

pespantelis · Accepted Answer · 2017-07-19 18:09:38Z

130

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/

edited Jul 19, 2017 at 18:09

answered Jan 18, 2016 at 22:42

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

steven87vt Over a year ago

@Bharat I think the jsfiddle was only intending to show that the above question boiled down to knowing about the ability to bind to attributes such as checked. Heres the docs for shorthand: v1 - v1.vuejs.org/guide/syntax.html#Shorthands v2 - vuejs.org/v2/guide/syntax.html#Shorthands

Caio Wilson Over a year ago

old question but just wanted to add my 2 cents: checked=true or false doesn't work. only checked="checked" and no checked present works for me. ended up using the v-model to set the value conditionally.

Aleph-null · Accepted Answer · 2019-02-12 10:53:59Z

10

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.

answered Feb 12, 2019 at 10:53

Aleph-null

3513 silver badges8 bronze badges

Comments

steven87vt · Accepted Answer · 2018-06-22 15:46:50Z

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>

leaveme_alone · Accepted Answer · 2019-12-30 08:51:24Z

1

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.

answered Dec 30, 2019 at 8:51

leaveme_alone

6862 gold badges8 silver badges27 bronze badges

Comments

Philip Bijker · Accepted Answer · 2021-07-01 15:45:26Z

Below is an example of keeping track of the selected radiobutton, by

applying a value binding to the object (:value="portal") and
applying a v-model binding to the currently selected object (v-model="currentPortal").

The radiobutton will be checked automatically by Vue, when the two match (no :checked binding necessary!).

Vue 3 with composition API

Vue.createApp({
  setup() {
    const portals = [{
      id: 1,
      name: "Portal 1"
    }, {
      id: 2,
      name: "Portal 2"
    }];
    
    const currentPortal = portals[1];
    
    return {
      portals,
      currentPortal
    }
  }
}).mount("#app");

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <template v-for="portal in portals">
    <input 
      type="radio" 
      :id="portal.id"
      name="portalSelect" 
      :value="portal" 
      v-model="currentPortal">

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

Collectives™ on Stack Overflow

vuejs set a radio button checked if statement is true

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related