vuetifyの v-data-table からフィルター後の項目を取得する

v-data-tableでフィルターをかけた後の表をCSVなんかでダウンロードしたいときに使える。
v-data-tableのプロパティにrefを追加することが重要。

<v-data-table 
  :headers="headers" 
  :items="desserts" 
  item-key="name" 
  class="elevation-1" 
  :search="search"
  :custom-filter="filterOnlyCapsText"
  ref="ref"
>
  <template v-slot:top>
    <v-text-field v-model="search" label="Search (UPPER CASE ONLY)" class="mx-4"></v-text-field>
  </template>
  <template v-slot:body.append>
    <tr>
      <td></td>
      <td>
        <v-text-field v-model="calories" type="number" label="Less than"></v-text-field>
      </td>
      <td colspan="4"></td>
    </tr>
  </template>
</v-data-table>

表の項目を取得するときはこんな感じ。refの部分はさっき属性で設定した名前。
filteredItemsでフィルター後の項目を取得して、それをsortItemsの引数として渡すことでソート後の項目を取得できる。

let items = this.$refs.ref.$children[0].filteredItems;
let sorted = this.$refs.ref.$children[0].sortItems(items);
console.log(sorted);

以下がソース全体。
一番下にある確認ボタンを押すとコンソールに結果が出されるので開発者ツール開いて確認してください。

See the Pen GRZbwep by のまのま (@choshicure) on CodePen.