Question

我正在将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加载？

Answer 1

<v-radio>元素不支持<input type="radio">那样的“ checked”属性。相反，当前选中的单选按钮由<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模型道具，在这种情况下为v-model="active"。然后，无线电组的值取决于数据中的“活动”变量。如果“ active”值等于:value="..."元素中的<v-radio>道具之一，则将检查该元素。另请参见this Codepen。

别忘了在您的价值道具前附加:，否则它将不受Vue的约束。

Answer 2

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

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

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

2 个答案: