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

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>

未选中vuetify单选按钮的图像

如果单击单选按钮，它将图标更改为radio_button_checked，但是在页面加载时似乎没有发生。如果已检查与之关联的输入，如何获取vuetify并使用radio_button_checked进行加载？

Answer 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 文档，所有选择组件都必须包括v模型道具，在这种情况下为v-model="active"。然后，无线电组的值取决于数据中的“活动”变量。如果“活动”值等于元素中的:value="..."道具之一<v-radio>，则将检查该元素。又见这个 codepen。

不要忘记:在您的价值道具前附加一个，否则它将不受Vue的约束。