vuetify3 メモ

vuetify3のメモ

vue3 + <script lang="ts" setup> 記法
templateはpugで記載

v-data-table

headersの設定

{title, value}の配列をv-data-tableへ渡す。

const headers = [
  { title: "ユーザID", value: "userId" },
  { title: "ユーザ名", value: "userName" },
];

v-data-table(:headers="headers" :items="items")

チェックボックス付けて選択可能とする

show-selectを設定する
v-modelに設定した配列へ、id値が設定される。
id以外のフィールドを利用する場合、item-valueを設定する

const selectedIds = ref([]);

v-data-table(:headers="headers" :items="items"
    show-select v-model="selectedIds" item-value="userId")