{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 爷的心禁止访问 的问题《Vuetify/Vuejs radio group and checkbox group set t》','https://www.manongdao.com/q-966254.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have something like this:
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>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.
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.
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.
Thanks!
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.