我有这样的东西:
https://jsfiddle.net/eywraw8t/372965/
new Vue({
el: '#app',
data: {
options: []
}
})<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
{{ options }}
<template>
<v-layout pa-3>
<v-flex xs12 sm6 offset-sm3>
<v-form>
<v-card>
<v-card-text>
<v-radio-group v-model="options">
<v-radio
label="Radio Option 1"
:value="1"
></v-radio>
<v-radio
label="Radio Option 2"
:value="2"
></v-radio>
</v-radio-group>
</v-card-text>
</v-card>
<v-divider></v-divider>
<v-card>
<v-card-text>
<v-checkbox
v-model="options"
label="Checkbox Option 3"
:value="3"
></v-checkbox>
<v-checkbox
v-model="options"
label="Checkbox Option 4"
:value="4"
></v-checkbox>
</v-card-text>
</v-card>
<v-divider></v-divider>
<v-card>
<v-card-text>
<v-checkbox
v-model="options"
label="Checkbox Option 5"
:value="5"
></v-checkbox>
<v-checkbox
v-model="options"
label="Checkbox Option 6"
:value="6"
></v-checkbox>
</v-card-text>
</v-card>
</v-form>
</v-flex>
</v-layout>
</template>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
</body>
</html>我想对单选按钮和复选框使用相同的变量。进一步解释我正在尝试做什么。我正在尝试将一组单选按钮和复选框组合在一起。如上所示，我有一组单选按钮和两组复选框。我正在尝试创建一个表单，用户将在其中选择一个选项，然后根据用户选择的内容向用户显示另一组选项。因此，如果他们选择选项 1，他们会看到单选按钮，如果选择选项 2，则会看到第二组复选框，依此类推。
现在的问题是，当我尝试将它设置为同一个变量时，如果您单击复选框，它会将值添加到选项变量中就好了，但如果您选中单选按钮，它将转换它并它不再是数组，复选框开始像单选按钮一样工作。
最后我想重置其他所有内容，除了在该组中选择的任何内容。
如果有更好的方法，我愿意接受建议，或者如果有人知道如何做到这一点，那么当您选择 radio 时，它只会将值设置为数组。
注意:
如果我将单选按钮设置为 :value="[1]"，它可以正常工作，但是当您选中复选框时，它将重置单选按钮并将值保留在数组中。
谢谢!
最佳答案
最好的办法是将它们分成三个不同的模型值，观察值并在必要时清除它(更改组)。我在这里上传了一个 fiddle :https://jsfiddle.net/qth0Lb5w/但它的要点是以下代码。
如果传递的新值包含元素(也就是您选中了一个框或单选按钮)，则每个 watch 都会清除其他组。计算属性只是将它们连接在一起，因为其他属性应该为空，这无关紧要。
new Vue({
el: '#app',
data: {
opt1: -1,
opt2:[],
opt3:[]
},
watch:{
opt1: function (n, o) {
if(n > -1){
this.opt2 = [];
this.opt3 = [];
}
},
opt2: function(n, o){
if(n.length > 0){
this.opt1 = -1;
this.opt3 = [];
}
},
opt3: function(n, o){
if(n.length > 0){
this.opt1 = -1;
this.opt2 = [];
}
}
},
computed:{
options : function(){
return (this.opt1 > -1 ? this.opt1 : []).concat( this.opt2).concat( this.opt3)
}
}
})
关于javascript - Vuetify/Vuejs 单选组和复选框组设置为相同的 v-model，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52371994/