Vue.js v-forでクラス名を上から順につける方法

Question

Vue.jsについてご教示頂けますと幸いです。
昨日使い始めたばかりで、間違った質問だったら申し訳ありません。。

やりたいこと
下記ので4行【A,B,C,D】のリストを表示しています。
そのリストへ、上から順に［a,b,c,d］というクラス名を付与したい。

<ul>
<li v-for="(item, index) in items"　@click="serectItem(index)" :class="{'-serect': index === itemNo}">
　<a class="en">{{ item.message }}</a>
</li>
</ul>

var app = new Vue({
  el:'#app',
  data: {
    itemNo: 0,
    items:[
      { id: '1', name: 'A' },
      { id: '2', name: 'B' },
      { id: '3', name: 'C' },
      { id: '4', name: 'D' }
    ]
  },
  methods: {
    serectItem: function(index){
      this.itemNo = index;
    }
  }
})

Vue.js ベテランの皆さまでしたら、どのように行なっているのでしょうか...？
リストの作り方などもより良い方法、ご指摘などあれましたらぜひ教えていただけると嬉しいです。

よろしくお願い致します。

Answer 1

ベテランではありませんが、私ならこうします。

↓最新ブラウザのみターゲットとする場合

<li v-for="(item, index) in items"
    @click="serectItem(index)"
    :class="{'-serect': index === itemNo, [item.name.toLowerCase()] : true}"
>

IEなどもターゲットにする場合は、オブジェクトリテラルのcomputed property name の機能が使えないので、以下のようにメソッドを追加してごまかします。

<li v-for="(item, index) in items"
    @click="serectItem(index)"
    :class="itemToClass(item, index)"
>

methods: {
  /* (略) */
  itemToClass: function(item, index){
    var res = {'-serect': index===this.itemNo };
    res[item.name.toLowerCase()] = true;
    return res;
  }
}

余談ですが、'serect' ではなく 'select' ではないでしょうか。

Comments

[TatsuyaOkawa]

ありがとうございます！！
そうするとコードもかなりわかりやすくなりますね！

※余談はその通りです。。失礼いたしました。。

[karamarimo]

ちなみにですが
:class="[{'-serect': index === itemNo}, item.name.toLowerCase()]"
としてもできますよ。

[R.Mizukami]

おお、そうだったんですね、知りませんでした。勉強になります。ありがとうございました。

Answer 2

ベテランではないので的外れな回答であれば申し訳ないのですが、このあたりが参考になるかと。
HTML クラスのバインディング

<ul id="app">
  <li v-for="(item, index) in items" 　@click="serectItem(index)" :class="item.classObject">
    　<a class="en">{{ item.name }}</a>
  </li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      itemNo: 0,
      items: [
        { id: '1', name: 'A', classObject: { a: true } },
        { id: '2', name: 'B', classObject: { b: true } },
        { id: '3', name: 'C', classObject: { c: true } },
        { id: '4', name: 'D', classObject: { d: true } }
      ]
    },
    methods: {
      serectItem: function (index) {
        this.itemNo = index;
      }
    }
  })
</script>

Comments

[TatsuyaOkawa]

なるほど、そういうやり方もあるんですね！！
正常に動きました。ありがとうございます！！