vueでテーブル操作してみた

tablesortライブラリを使って色々やってみる。

{{ label }}

<!-- フィルター入力 -->
<div class="filters">
  <label>
    IDがこの値以上：
    <input type="number" v-model.number="filter.minId" />
  </label>
  <label>
    名前に含まれる文字列：
    <input type="text" v-model="filter.nameContains" />
  </label>
</div>

<!-- テーブル -->
<table v-if="filteredTable.length > 0">
  <thead>
    <tr>
      <th>ID</th>
      <th>名前</th>
      <th>詳細</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in filteredTable" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.details }}</td>
    </tr>
  </tbody>
</table>
<p v-else>該当するデータがありません</p>