飴屋

Vue.js/メニューを作った

試しにクリックして選ぶメニューを作ることにしました。 

const app = Vue.createApp({
  data() {
    return {
      category: 0,
      categoryList: ['カテゴリー 1','カテゴリー 2','カテゴリー 3'],
    }
  },
  methods: {
    changeCategory(i) {
      this.category = i;
    }
  }
});
app.mount('#menu');

メニューからカテゴリーを選ぶ、といった用途のつもりです。データ部にはカテゴリーの選択肢リストと現在選択中のカテゴリー番号（リストの添え字番号）を持たせて、メソッド部にカテゴリ変更メソッド(changeCategory)を書いてみました。 

<ul id="menu">
  <li v-for="(c,index) in categoryList" :class="{on: category==index}" @click="changeCategory(index)">{{ c }}</li>
</ul>

あとはカテゴリーの選択肢リストのループを回して、クリックできる選択肢を用意するだけでできあがりです。すごい、簡単！

私の中で初出だったのが、配列のv-forが「(_,index) in _」と表記するとindexに配列の添え字が入ることでした。選択肢のIDが連番（リストの添え字）でいいなら、これが一番楽ですね。

class(v-bind:class)の中身はブール値でclassを持たせたりひっこめたりできるんですね。

@click(v-on:click)にはクリック時に呼び出すメソッドを書きましたが、メソッド名の後に「()」をつけると引数も渡せるんですね。これで変更後のカテゴリ番号を渡せました。カテゴリ変更に伴う処理はメソッドの中でロジックを実装していけばいいですね。

Vue.js記事一覧

Last-Modified