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

问题描述

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

I'm using Vue with Vuetify and currently have a form with a group of radio buttons:

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

On page load, active set to 1:

 data: {
    active: 1
}

我看到输入已选中=已选中"，但图标仍为radio_button_unchecked"，因此似乎未选中:

I see the input has checked="checked" but the icon remains as "radio_button_unchecked" so doesn't appear to be checked:

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

If I click the radio button, it changes the icon to radio_button_checked, but on page load that doesn't seem to be happening. How can I get vuetify to load with radio_button_checked if the input it's associated with is checked?

推荐答案

元素不支持checked"属性，如 确实如此.相反，当前选中的单选按钮由 包装器管理.

The <v-radio> element does not support a "checked" attribute like <input type="radio"> does. Instead, the currently checked radio button is managed by the <v-radio-group> wrapper.

以下代码应该可以工作:

The following code should work:

<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".然后，无线电组的值取决于数据中的活动"变量.如果active"值等于 <v-radio> 元素中的 :value="..." 道具之一，则将检查该元素.另请参阅此代码笔.

According to the Vuetify docs all selection components must include a v-model prop, in this case, v-model="active". The radio group will then have it's value dependant on the "active" variable in your data. If the "active" value equals one of the :value="..." props in the <v-radio> elements, that element will be checked. See also this codepen.

不要忘记在 value prop 之前附加 : 否则它不会被 Vue 绑定.

Don't forget to append a : before your value prop or it won't be bound by Vue.

这篇关于Vuetify 单选按钮未显示为选中状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！