質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1643閲覧

v-selectの項目選択時に呼び出し元のダイアログを閉じたい

Hr_ppm

総合スコア10

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/04/26 02:29

編集2020/04/26 14:32

v-data-tableの項目の変更をセレクトボックス(v-select)で行おうとしています。
その部分の処理の流れとして、項目クリックでダイアログ呼び出し、ダイアログ内にセレクトボックス形式で値を選択としています。
このセレクトボックスを値選択時に閉じるにはどうすればいいでしょうか。

下記は現在のダイアログ呼び出し部分です、選択した内容でテーブルのデータの書き換えはできていますが、セレクトボックス選択→ダイアログの終了という操作になってしまうため、これをセレクトボックス選択時に閉じるように変更したいです

JavaScript

1<v-data-table 2 :headers="archive_headers" 3 :items="archive_playList" 4> 5 ~省略~ 6 <template v-slot:item.category="props"> 7 <v-edit-dialog> 8 {{props.item.category}} 9 <template v-slot:input> 10 <v-select 11 :items="selectPlayCategory" 12 v-model="props.item.category" 13 item-text="text" 14 item-value="value" 15 placeholder="*カテゴリ" 16 ></v-select> 17 </template> 18 </v-edit-dialog> 19 ~省略~
以下頂いたコメントをもとに変更

v-edit-dialogを使っていた部分をまるまる削除し、v-dialogに差し替えました。scriptのほうでcategoryDialog:falseも新たに追加してます。
使用するコンポーネントを変えた影響で、値が空白だったらクリック出来なかったりダイアログが画面の中央に表示されたりしていますが
セレクトボックスの選択→終了という動作はできています。

JavaScript

1 <v-dialog v-model="categoryDialog" dark max-width="200"> 2 <template v-slot:activator="{on}"> 3 <span v-on="on">{{props.item.category}}</span> 4 </template> 5 <v-select 6 :items="selectPlayCategory" 7 v-model="props.item.category" 8 item-text="text" 9 item-value="value" 10 @change="categoryDialog=false" 11 ></v-select> 12 </v-dialog>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

https://vuetifyjs.com/ja/components/dialogs/#%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0

こちらが参考になると思います。
dialogをフラグで管理するようにし、v-selectの選択時の処理でフラグを変更してあげるイメージです。

投稿2020/04/26 06:28

moya_dev

総合スコア183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Hr_ppm

2020/04/26 14:36

ありがとうございます、v-dialogにフラグ管理を追加して閉じる動作を実現できました。もともと使っていたv-edit-dialogで同じ動作をさせたかったのですが、こちらはわからず諦めることにしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問