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.

Answer 1

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/

Answer 2

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.