如何更改Vuetify中的文本字段布局？

Question

我想更改文本字段的布局方式。我当前的标记变红了：

我希望这样重新布局：

到目前为止，我的代码：

<template>
    <v-card
        max-width="1200"
        class="mx-auto"
    >
      <v-container
        class="pa-2"
        fluid
      >
        <v-form
            ref="form"
            v-model="valid"
            lazy-validation
        >
            <v-text-field
            v-model="name"
            :counter="10"
            :rules="nameRules"
            label="Name"
            required
            ></v-text-field>

            <v-text-field
            v-model="email"
            :rules="emailRules"
            label="E-mail"
            required
            ></v-text-field>
        </v-form>
      </v-container>
    </v-card>
</template>

结果如下：

我想将结果更改为这样：

Answer 1

您可以使用outlined属性使带有边框的文本字段显示出来。

请参见examples here