Vuetify 选中v-radio时无法自动为v-model赋值问题如何解决

核心原因 #

v-radio 和 v-checkbox 的底层交互逻辑不同：v-checkbox 默认绑定布尔值，选中自动设为true、取消自动设为false；但v-radio必须显式指定value属性，选中时才会把value对应的值自动赋值给v-model绑定的变量，不需要额外监听change事件。

解决方案 #

场景1：单选项点击即标记为完成（选中后不可取消，符合单选框原生交互）

直接补充value属性即可，修改后代码如下：

<v-radio
  v-model="arr1[index].isDone"
  :value="true"
></v-radio>

场景2：需要支持完成/未完成互斥选择

用v-radio-group包裹两个单选框，分别设置对应布尔值即可：

<v-radio-group v-model="arr1[index].isDone">
  <v-radio label="完成" :value="true"></v-radio>
  <v-radio label="未完成" :value="false"></v-radio>
</v-radio-group>

以上两种写法都不需要额外定义事件处理函数，v-model会自动更新绑定值。

内容的提问来源于stack exchange，提问作者mikeym