飴屋

Vue.js/リストを作った

はじめの一歩

「一覧画面」みたいに言われる画面を作りましょう。 

const app = Vue.createApp({
  data() {
    return {
      rows: [
        { id: 1, name: 'Taro', age: 5, country: 'Japan' },
        { id: 2, name: 'Jiro', age: 3, country: 'Japan' },
        { id: 3, name: 'John', age: 15, country: 'U.K.' },
        { id: 4, name: 'Michael', age: 8, country: 'U.S.A.' },
        { id: 5, name: 'Martín', age: 24, country: 'Spain' },
        { id: 6, name: 'Miguel', age: 5, country: 'Mexico' },
      ],
    }
  }
});
app.mount('#list');

rowsというデータに人名や年齢を詰め込んだリストを用意してみました。 

<div id="list">
  <ul>
    <li v-for="(r,index) in rows">
      <span>氏名: {{ r.name }}</span>
      <span>( {{ r.age }} )</span>
      <span>{{ r.country }} 出身</span>
    </li>
  </ul>
</div>

v-forループを使って一覧表示しました。これを基本のリストとします。

件数表示

<div id="list">
  <p>{{ rows.length }}件数</p>
  <ul> .. </ul>
</div>

リストの上に表示件数を出してみました。rowsの中身の数を数えただけ(Array.length)ですね。

絞り込み

<div id="list">
  <p>{{ filterdRows.length }}件数</p>
  <p><input type="text" v-model="keyword"></p>
  <ul>
    <li v-for="(r,index) in filterdRows">
      <span>氏名: {{ r.name }}</span>
      <span>( {{ r.age }} )</span>
      <span>{{ r.country }} 出身</span>
    </li>
  </ul>
</div>

リストをキーワードで絞り込んでみます。テキストフィールドを足して、そこに入力されたテキストが含まれるものだけリストに表示されるようにします。テキストフィールドには v-model="keyword" という指定が入りましたね。Vueのデータ（data）に keyword というのを追加すると、テキストフィールドの入力内容とkeyword値が同期されるようになるそうです。これは便利！

今までrows配列の中身を表示していましたが、絞り込みが済んだfilterdRowsという新しい配列を作ってそれを表示させましょう。v-forループのところと件数表示のところをfilterdRowsに変更しました。 

const app = Vue.createApp({
  data() {
    return {
      rows: [ .. ],
      keyword: '',
    }
  },
  computed: {
    filteredRows() {
      return rows.filter(r => {
        if (this.keyword) {
          return (r[1]+r[2]+r[3]).match(this.keyword);
        }
        return true;
      });
    },
  }
});
app.mount('#list');

data部にkeywordを追加しました。とりあえず空の状態です。

そしてcomputed部が新たに増えました。data部が事前に中身が決められた静的なデータだとすれば、computed部はその都度計算して決定される動的なデータって感じですかね。keywordの中身が空の場合は、絞り込みは行わず全リストを表示します。keywordが入力されていたら、rowsの中身毎に「氏名・年齢・出身国」を連結した文字列の中にkeywordがあるかどうかをチェックし、あったものだけ表示します。これだけ書けば、もう意図した通りに動いてくれました。ありがたや～。

次回、もうちょっと機能を追加してみましょう。

Vue.js記事一覧