vuetifyのdatePickerにチェックボックスを付けたい

やりたいこと

vuetifyのdatePickerを使用して、ダイアログを表示させた後、一緒にチェックボックスを選択できるようにしたいと考えています。
その際、画像のようにカレンダー⇒チェックボックス⇒cancel/okの順番に表示させたいです。

下記コードでチェックボックスを埋め込み、該当箇所のwidthを100%にしてみたり、色々試行錯誤しましたが、どうしても横並びになってしまいます。

      <v-dialog
        ref="dialog"
        v-model="modal"
        :return-value.sync="date"
        persistent
        width="290px"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="date"
            label="Picker in dialog"
            readonly
            dense
            solo
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        
        <v-date-picker
          v-model="date"
          color="green darken-3"
        >

          <div>
            <v-checkbox
              v-model="checkbox"
              :label="`checkbox: ${checkbox.toString()}`"
            ></v-checkbox>
          </div>
          
          <v-btn
            text
            color="green darken-3"
            @click="modal = false"
          >
            Cancel
          </v-btn>
          <v-btn
            text
            color="green darken-3"
            @click="$refs.dialog.save(date)"
          >
            OK
          </v-btn>

        </v-date-picker>
      </v-dialog>

方法論をご存じの方、いらっしゃいましたら、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

解決案

<template>の<v-date-picker>内を下記のようにします。

HTML
1<div>
2  <v-checkbox
3    v-model="checkbox"
4    :label="`checkbox: ${checkbox.toString()}`"
5  ></v-checkbox>
6</div>
7<div>
8  <v-btn
9    text
10    color="green darken-3"
11    @click="modal = false"
12  >
13    Cancel
14  </v-btn>
15  <v-btn
16    text
17    color="green darken-3"
18    @click="$refs.dialog.save(date)"
19  >
20    OK
21  </v-btn>
22</div>

また、同コンポーネントで<style>を下記のように実装します。
このとき、<style>のscopedを設定しないように注意してください（Vuetifyコンポーネントにスタイルが効かなくなってしまいます）。
縦に並べるためにflex-direction: column;を設定しており、margin-topの設定は表示の微調整のためです。

<style>
.v-picker__actions.v-card__actions{
  flex-direction: column;
  margin-top: -40px;
}
</style>

解説

Vuetifyは結構スタイルを厳しめに縛ってくるライブラリであまり融通が利く印象はありません。
ですので私が知る限りにはなりますが、柔軟に表示を変更するためにはVuetifyコンポーネント側のスタイルを無理やりいじる必要が出てきます。

今回、チェックボックスとボタンが入っている<v-date-picker>内はdisplay: flex; flex-direction: row; のスタイルがかかっています。このことは、ブラウザのデベロッパーツールで該当の要素部分を見てあげると、添付スクリーンショットのように把握することができます。
もし上記のCSSプロパティについてご存じなければ簡単にググっていただければと思いますが、このことから子要素に対してwidth: 100%など設定しても縦に配置することはできないことが分かります。

今回の対処では縦に並べたい要素であるチェックボックスと２つのボタンについて１つのdivタグでまとめ、<v-date-picker>内に配置した結果親要素になるセレクタに対してflex-direction: column;を設定することで要素が縦に並ぶようにVuetify側のスタイルを変更しているということになります。

この方法の問題としては、他で同じVuetifyコンポーネントを用いたときに影響が及ぶ可能性があることですが、これを防ぎたい場合はセレクタの詳細度を上げることで解決できるかと思います。

何かご不明な点があればお伝えください。
以上ご確認のほどお願いいたします！

投稿2021/03/15 14:46

編集2021/03/15 14:47

marasonPD

総合スコア170

tktail

2021/03/16 04:24

marasonPDさんご回答ありがとうございます！早速組み込んでみましたが、バッチリでした！ flex-direction: column;は使ったことがありませんでしたので、勉強になりました。またmarkdown式の解説つき回答で理解がしやすかったので、その辺りも参考になりました。ありがとうございます。

行動規範の内容に同意します