vuejs设置一个单选按钮，检查语句是否为真

vue.js Vue.js

西门老丝Pro

2020-03-11

我试图仅当我的if语句为true时，才使用vuejs v-检查单选按钮。有没有办法使用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语句用于检查是否显示或隐藏输入。

任何帮助将不胜感激。

第847篇《vuejs设置一个单选按钮，检查语句是否为真》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Jim猿 2020.03.11

如果可以根据自己的逻辑进行调整，则可以遵循以下选项：

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

missing_status的值可以是“ Lost”或“ Return Supplier”，并且将基于该值自动选择单选选项。

古一梅 2020.03.11

也许有人认为这种方法很有帮助：

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

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

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

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

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

路在何方 2020.03.11

您可以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/

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android