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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/26 14:36