vuejs 设置一个单选按钮检查语句是否为真 [英] vuejs set a radio button checked if statement is true

问题描述

我正在尝试仅当我的 if 语句为真时才使用 vuejs v-for 检查单选按钮.有没有办法使用 vuejs 的 v-if/v-else 来解决这类问题?

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

以下是我目前使用 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}}"已检查=已检查"><label for="{{portal.id}}">{{portal.name}}</label>

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

非常感谢任何帮助.

解决方案

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

<div v-for="portal in portals"><输入类型=收音机"id="{{portal.id}}"名称=门户选择"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>

简单示例:https://jsfiddle.net/b4k6tpj9/

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/

这篇关于vuejs 设置一个单选按钮检查语句是否为真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！