vuejs set a radio button checked if statement is true

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.


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/


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.


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.