Vuetify 单选按钮未显示为选中状态答案

【问题标题】：Vuetify radio button not appearing as checkedVuetify 单选按钮未显示为选中状态
【发布时间】：2019-06-30 23:27:54
【问题描述】：

我正在使用 Vue 和 Vuetify，目前有一个带有一组单选按钮的表单：

<v-radio-group label="Active?">
  <v-radio name="active" label="No" value="0" v-bind:checked="active === 0"></v-radio>
  <v-radio name="active" label="Yes" value="1" v-bind:checked="active === 1"></v-radio>                
</v-radio-group>

在页面加载时，活动设置为 1：

 data: {
    active: 1
}

我看到输入已选中 =“checked”，但图标仍为“radio_button_unchecked”，因此似乎没有被选中：

<input aria-label="Yes" aria-checked="false" role="radio" 
    type="radio" value="1" name="active" checked="checked">
<div class="v-input--selection-controls__ripple"></div>
<i aria-hidden="true" class="v-icon material-icons theme--light">radio_button_unchecked</i>

Image of vuetify radio button unchecked

如果我单击单选按钮，它会将图标更改为 radio_button_checked，但在页面加载时似乎没有发生。如果检查了与之关联的输入，如何让 vuetify 加载 radio_button_checked？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

<v-radio> 元素不支持像 <input type="radio"> 那样的“已检查”属性。相反，当前选中的单选按钮由 <v-radio-group> 包装器管理。

以下代码应该可以工作：

<v-radio-group label="Active?" v-model="active">
  <v-radio name="active" label="No" :value="0"></v-radio>
  <v-radio name="active" label="Yes" :value="1"></v-radio>                
</v-radio-group>

根据 Vuetify docs，所有选择组件都必须包含一个 v-model 属性，在本例中为 v-model="active"。然后，无线电组的值将取决于数据中的“活动”变量。如果“活动”值等于 <v-radio> 元素中的 :value="..." 属性之一，则将检查该元素。另见thiscodepen。

不要忘记在你的 value 属性之前附加一个 : ，否则它不会被 Vue 绑定。

【讨论】：

我只想显示一个单选按钮。怎样才能做到这一点？我还需要将收音机包装在 v-radio-group 中吗
@Wikki 是的，但请注意，您通常不能取消选中已选中的单选按钮。你想要Checkbox 吗？

【解决方案2】：

我遇到了一个实例，其中 v-model 解决方案无法与我试图完成的任务一起工作。我想出了以下使用 off-icon 道具的工作：

<v-radio
  :off-icon="item.active ? '$radioOn' : '$radioOff'"
/>

【讨论】：