【Vue.js】v-forで選択されたアイテムを取得して表示する方法

Vue.js

v-forで選択されたアイテムを取得して表示する方法です。
Vue2のコード例ですが、考え方はVue 3でも同じです。

v-forで選択されたアイテムを取得して表示する方法

ポイント

  • liタグなどでv-forを作成する
  • data()でtrue/false（選択・非選択)を表す変数を初期設定
  • v-forのあるliタグなどにクリックイベントをセットする
  • クリックイベントで発火するメソッドを作成する
  • メソッドは、クリックされたアイテムを受け取るように引数を設定する
  • :classで選択されたことがわかるようにクラスをつけて表示を変える

下の例では、選択・非選択を表す変数selectを作成して、trueにすると選択されたことがわかるようにしています。

選択されたアイテムを取得して条件分岐でクラスを付与するコードの例

クイズアプリなどで選択されたアイテムを取得して正解・不正解を判別できるようにする例です。

template

<ul>
  <li
    v-for="(item,index) in element.suggestions"
    :key="index"
    :class="select ? check(item) : ''"
    @click="selectResponse(item)"
    >
    {{item.suggestion}}
  </li>
</ul>

status.correctが付いているものをselectしたらcorrectクラス、
ついていないものがselectされたらincorrect、
selectされていない項目はクラスなしという条件にしています。

data()

select: false, //項目の選択/非選択

methods

選択されたアイテムを取得するメソッド

// selectしたものを選択=true
selectResponse(e) {
  this.select = true; //選択されたアイテムがtrue(正解でも不正解でも)
},

選択されたものが正解・不正解かによって付与するクラスを変更するメソッド

// classの追加: correctクラス / incorrectクラス
check(status) {
  if(status.correct) {
    return 'correct'
  } else {
    return 'incorrect'
  }
},

選択されたアイテムについているクラスでチェックマークをつける

また、選択されたアイテムについているクラスでチェックマークをつけたりすることができます。

template

<!-- チェックマーク/バツマーク -->
<div class="fas fa-check" v-if="select ? item.correct: ''"></div>
<div class="fas fa-times" v-if="select ? !item.correct: ''"></div>

条件演算子を使って、選択されたものがある場合で条件を判断します。
もしそれがcorrectのステータスなら、checkを、それ以外ならtimesをつけるというコードです。

Vue.js

Posted by devsakaso