验证文本框旁边的按钮

Question

我有一个文本字段，并且在文本字段的右侧附加了一个按钮。 我的问题是该按钮有一个上边距，并且与文本字段不一致。如下图所示，按钮太低。

示例：

问题：

如何以本机方式将按钮与文本字段对齐？

我尝试将class =“ mt-0”应用于按钮，但这没有任何改变。

代码：

<v-row>
  <v-col md="6" offset-md="3">
    <v-text-field class="pt-5" placeholder="Strawberries" outlined clearable>
      <!-- <template slot="append">
        <v-icon>clear</v-icon>
      </template> -->
      <template slot="append-outer">
        <v-btn dark x-large color="pink"> SEARCH </v-btn>
      </template>
    </v-text-field>
  </v-col>
</v-row>

感谢您的帮助！

Answer 1

使用此：

<v-row>
    <v-text-field class="pt-5" placeholder="Strawberries" outlined clearable></v-text-field>
    <v-btn dark x-large color="pink"> SEARCH </v-btn>
</v-row>

Answer 2

我遇到了同样的问题，但我能找到的唯一简单解决方案是将 hide-details 添加到 v-text-field。但不幸的是，如果这是您需要的东西，这会删除验证消息。