如果statement为true,则vuejs设置一个单选按钮

Question

我试图使用vuejs v - 检查单选按钮,仅当我的if语句为真时.有没有办法使用vuejs'v-if/v-else来解决这类问题？

在php和html中我可以通过执行以下操作来实现此目的:

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

以下是我到目前为止使用的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>

我知道这里的v-if语句用于检查是否显示或隐藏输入.

任何帮助将非常感谢.

Answer 1

您可以checked像这样绑定属性:

<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>

简单的例子:https://jsfiddle.net/b4k6tpj9/

Answer 2

也许有人发现这种方法有帮助：

在模板中，我为每个单选按钮分配一个值：

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

然后在组件中设置值，即：

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

在这种情况下，vue 将选择第二个单选按钮。