如何通过 vuetify 创建这样的表单？答案

【问题标题】：how to create form like this by vuetify?如何通过 vuetify 创建这样的表单？
【发布时间】：2020-12-28 05:57:39
【问题描述】：

我想创建如上图所示的表单，但我不知道该怎么做？我想将数据绑定到参数'quota'

data(){
 return {
   quota :'',
   defaultquota:'-1'//which is defined as unlimited
 }
}

【问题讨论】：

标签： forms vue.js vuetify.js

【解决方案1】：

我认为查看 vuetify 示例可能是您最好的选择。你试过什么了？通过查看您的图片，您可以看到您将需要一个 v-radio-group，它将有 2 个 v-radio 按钮。和一个 v-text-field 将绑定到您的 quota 变量，结果将是这样的：

<form>
    <v-row>
    <v-radio-group label="quota:" row>
        <v-radio label="unlimited"/>
        <v-radio label="input by yourself:"/>
    </v-radio-group>
    <v-text-field outlined  v-model="quota"/>
    </v-row>
</form>

您可能想在 the v-radio-group 上添加一个 v-model 以便确定选择了哪个选项并在需要时设置一个默认选项。

表格很简单，我为它加了一个，让它都出现在图片的同一行。 v-text-field 上的 outlined 将赋予它图片中四四方方的输入外观。其余的应该是不言自明的。

我强烈建议您查看 vuetify 在其主站点上提供的示例和 api，因为您查看的越多，您就越能准确地弄清楚您需要什么。 https://vuetifyjs.com/en/introduction/why-vuetify/#guide

在导航中的组件下方查看，所有组件都在其中列出，以及使用它们的示例以及它们的外观，这将非常有帮助！

编码愉快！

【讨论】：

谢谢先生，但是如果 v-radio-group 没有像 v-model="quota" 那样绑定数据，当我点击它时就会出错
vuetifyjs.com/en/components/radio-buttons/#usage 检查“使用”将有助于向您展示如何在 v-radio-group 上进行 v-model。查看 vuetify 文档中的示例和 api 将对您有很大帮助