如何在Vuetify日期选择器中添加其他字段?

时间:2018-12-14 04:19:44

标签: vuejs2 vuetify.js

我正在尝试在Vuetify日期选择器中添加警报(出于验证目的)...。但是我似乎无法使其与Vuetify的组件结构很好地配合使用。

我的标记基本上是这样的:

<v-menu>
  <v-text-field><v-text-field>
  <v-picker>
    <v-layout row>
      <v-alert>
    </v-layout>
  <v-picker>
  <v-card-actions>
    <v-btn>Cancel</v-btn>
    <v-btn>OK</v-btn>
  </v-card-actions>
</v-menu>

这是Codepen演示的问题。单击日期以查看我的顶升版式:https://codepen.io/jamesfacts/pen/OrMZgx

我认为在警报周围添加<v-layout row>将使我在选择器内获得新的一行,但是没有肥皂。

我知道我可以通过为Vuetify组件专门设置CSS属性来修复显示,但是这感觉像是错误的方法。这里有Vuetify-y解决方案吗?还是我应该强迫渲染的HTML看起来像我想要的样子。

1 个答案:

答案 0 :(得分:0)

v-layout更改为列,而不是row

这是更新的codepen