Vue.js - 私は動的なボタンを持っていると私は私は1つのボタンをクリックすると色が変わることを望みます

Snowappix：

私はV-のために動的にボタンを作成しているし、今私がクリックされたボタンの色が変化し、他はすべて同じ色を持っていることを望みます。

<template>
  <div id="exam-screen" class="exam jumbotron">
    <h1>{{ title }}</h1>
    <div class="row">
      <p class="col-md-6" v-bind:key="exam.id" v-for="exam in getExam">
        <button
          class="exam exam-btn btn btn-secondary btn-lg btn-block"
          v-bind:id="
            'exam-' + exam.id + '-' + exam.season + '-' + exam.year + '-btn'
          "
        >
          <span>{{ exam['season_de'] }} {{ exam.year }} </span>
        </button>
      </p>
    </div>
    <div class="row">
      <p class="col-md-8"></p>
      <BaseButton>{{ startButton }}</BaseButton>
    </div>
  </div>
</template>

私は、V-上の必要があることを知っている：クリックディレクティブが、私は色を変更する方法がわかりません...

私はすでにそのJavaScriptで管理し、私はそれがVue.jsでどのように動作するかわかりません...

How I do it in JavaScript:

function selectAnswer(id) {
    $(id).addClass("btn-primary");
    $(id).removeClass("btn-secondary");
}

function deselectAnswer(id) {
    $(id).addClass("btn-secondary");
    $(id).removeClass("btn-primary");
}

私は誰かが私を助けることを願って...

palaѕn：

あなたは使用して、ボタンからクラスを追加＆削除することができます@click＆:classこのように：

new Vue({
  el: "#myApp",
  data: {
    items: [{text: 'This is Button 1'},{text: 'This is Button 1'},{text: 'This is Button 3'}]
  },
  methods: {
    toggleClass(index) {
      this.items.forEach(item => item.active=false);
      let item = this.items[index];
      item.active = !item.active;
      this.$set(this.items, index, item);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="myApp">
  <div v-for="(item, index) in items" :key="index">
    <button 
      :class="{ 'btn-primary': item.active, 'btn-secondary': !item.active}" 
      @click="toggleClass(index)" 
      class="btn btn-md btn-block m-3">
      <span>{{ item.text }} </span>
    </button>
  </div>
</div>

してくださいノート@clickのためだけ速記であるv-on:clickと:classのためだけの省略形ですv-bind:class。また、我々は削除する必要がありbtn-secondary、我々はそれ以外のボタンを最初に設定するクラスをbtn-primaryクリックして上のボタンに反映されません。