Vuejs2 如何使用Vuetifyjs水平对齐表单组件

我正在学习vuetifyjs vuejs2，我很难通过vuetify编写完成以下任务的代码：

我希望vuetify上有这种形式：

1-部件水平的形状

2-这些组件应该只有3个选择框，带有提交按钮

3-有一个表单，可以将所选项目发送到页面

这就是我需要您提供vuetify上的代码示例的地方

---

最后，我应该有一个表单，其中有3个选择框，填充了它们的选项，还有一个提交，将结果转发给vue。

您可以使用vuetify提供的网格布局来实现这一点

<template>
    <v-layout row wrap >
        <v-flex xs12>
               <v-form v-model="valid" ref="form">
                    <v-layout row wrap>
                        <v-flex xs3 v-for="option in selectOptions" :key="option.text">
                             <v-checkbox :label="option.text" v-model="selected" :value="option.value"></v-checkbox>
                        </v-flex> 
                        <v-flex xs3>
                             <v-btn small class="primary">save</v-btn>
                        </v-flex>             
                    </v-layout>                    
            </v-form>
            <p>selected options : {{selected}}</p>
        </v-flex>
    </v-layout>
</template>

<script>
    export default{
        data(){
            return {
                valid: false,
                selected:[],
                selectOptions:[
                    {text: 'Apples', value: 'apple'},
                    {text: 'Oranges', value: 'orange'},
                    {text: 'Grapes', value: 'grape'}
                ]
            }
        },
        }
    }
</script> 

拯救
所选选项：{{selected}

导出默认值{
数据（）{
返回{
有效：假，
选定：[]，
选择选项：[
{文本：'apple'，值：'apple'}，
{文本：'Oranges'，值：'orange'}，
{文本：'Grapes'，值：'Grapes'}
]
}
},
}
}

---

以下是单选按钮的工作方式，您可以按如下方式设置单选组上的“行”属性：

<v-radio-group row v-model="radioValue">
    <v-radio value="0" :label="Value 0"></v-radio>
    <v-radio value="1" :label="Value 1"></v-radio>
    <v-radio value="2" :label="Value 2"></v-radio>
</v-radio-group>

如这里的文档所示-->