Vuetify/Vuejs单选组和复选框组设置为相同的v模型 [英] Vuetify/Vuejs radio group and checkbox group set to same v-model
问题描述
我有这样的东西:
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组复选框.我正在尝试创建一个表单，用户将在其中选择一个选项，然后根据用户选择的内容向用户显示另一组选项.因此，如果他们选择选项1，他们将看到单选按钮，如果选择了选项2，则将看到第二组复选框，依此类推.
I would like to use the same variable for the radio buttons and checkboxes. To further explain on what I am trying to do. I am trying to group a set of radio buttons and checkboxes together. As shown above, I have 1 set of radio buttons and 2 sets of checkboxes. I am trying to create a form where the user will select one option and then another set of options are shown to the user based off what they selected. So, if they select option 1, they would see the radio buttons, if option 2, the second set of checkboxes and so on.
现在的问题是，当我尝试将其设置为相同的变量时，如果单击复选框，它将把值正确地添加到options变量中，但是如果您选中单选按钮，它将对其进行转换并它不再是数组，并且复选框开始像单选按钮一样起作用.
The problem right now is when I try to set it to the same variable, if you click the checkboxes, it will add the values to the options variable just fine, but if you check the radio buttons, it will convert it and it's not longer an array and the checkboxes start to act like radio buttons.
最终，我想重设其他所有内容，但在该组中选择的内容除外.
Eventually I would like to reset everything else, except whatever is selected within that group.
如果有更好的方法，我愿意提出建议，或者如果有人知道如何制作它，那么当您选择收音机时，它将只将值设置为数组.
If there is better approach to this, I'm open to suggestions or if anyone knows how to make it so that when you select the radio, it will just set the value as an array.
注意:
如果我将单选按钮设置为:value="[1]"，则可以正常工作，但是当您选中复选框时，它将重置单选按钮并将值保留在数组中.
Note:
If I set the radio button as :value="[1]", it sort of works, but when you select the checkboxes, it will reset the radio buttons and keep the value in the array.
谢谢！
推荐答案
您最好的选择是将这些模型分为三个不同的值，并观察该值并在必要时将其清除(更改组).我在这里上传了一个小提琴: https://jsfiddle.net/qth0Lb5w/但要点是以下代码.
Your best bet is going to be to split these out into three different values for the model, and watch the value and clear it if necessary (changing groups). I've uploaded a fiddle here : https://jsfiddle.net/qth0Lb5w/ but the gist of it is the following code.
如果要传递的新值包含元素(又称为选中复选框或单选按钮)，则每个手表都会清除其他组.计算出的属性只是将它们连接在一起，因为其他属性都应该为空，这无关紧要.
The watches each clear the other groups if the new value being passed contains elements (aka you checked a box or a radio button). The computed property just joins them all together since the others should be empty it won't matter.
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)
}
}
})
这篇关于Vuetify/Vuejs单选组和复选框组设置为相同的v模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
