0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vuetifyのv-data-tableでチェックボックスがすべて選択されてはまった

Last updated at Posted at 2023-02-03

事象

Vuetifyのv-data-tableで show-select プロパティを設定すると、各行を選択するチェックボックスが表示される。

デフォルトでは複数の行にチェックをつけることができるが、任意の行のチェックを入れるとすべての行にチェックがつくようになってしまった。

show-selectの動作

チェックをつけた行はv-modelプロパティで設定した変数の行列にオブジェクトが追加される。問題が起きているとき、v-modelに設定した変数にはクリックした行のみが追加されていたが、チェックはすべての行についていた。

また最上部には全選択チェックボックスが表示されるが、これをクリックした場合も1つの行だけが変数に追加され、すべての行がチェックされた。

解決方法

v-data-taleの item-key の指定が抜けていた。

重複のない主キーを指定することで無事チェックした行だけが選択されるようになった。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?