vue.jsでclassの削除

前提・実現したいこと

Vue.jsで３択問題を作っています。
ドットインストールのJavaScript講座で紹介されていた同じものをVue.jsで作ろうとしています。

正解を選んだ時にその要素にのみcorrect classを追加する処理を実装したのですが、
次の問題に行く時に、追加したcorrect classを削除したいのですが、上手くいきません。
JavaScriptだとclassList.removeだと思うのですが、vue.jsで実現するいい方法はないでしょうか？

該当のソースコード

html
1
2  <section id='app'>
3    <ul>
4      <li v-on:click="select(index,$event)"
5          v-for="(element,index) in elements" >
6          {{ element }}
7      </li>
8    </ul>
9    <div class="btn" v-on:click="remove">remove</div>
10  </section>

JavaScript
1  var vm = new Vue({
2    el: '#app',
3    data: {
4      elements:['a1','a2'],
5    },
6    methods: {
7      select: function (index, e) {
8        console.log("select clicked");
9        e.currentTarget.className="correct";
10      },
11      remove: function (e) {
12        console.log("remove clicked")
13      }
14    },
15  });
16

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでしょうか？
v-bind:class にオブジェクトを渡すことで、そのオブジェクトの各要素について、キーに相当するクラスが値が truthy になった時に付与されるようになります。

参考: https://jp.vuejs.org/v2/guide/class-and-style.html

vue
1<section id='app'>
2  <ul v-on:click="select">
3    <li
4      v-for="(element, index) in elements"
5      v-bind:class="{ correct: clickedIndex === index }"
6    >
7      {{ element }}
8    </li>
9  </ul>
10  <div class="btn" v-on:click="remove">remove</div>
11</section>

javascript
1var vm = new Vue({
2  el: '#app',
3  data() {
4    return {
5      elements:['a1','a2'],
6      clickedIndex: null,
7    };
8  },
9  methods: {
10    select(ev) {
11      console.log("select clicked");
12      this.clickedIndex =
13        [...ev.currentTarget.children].indexOf(ev.target);
14    },
15    remove(e) {
16      console.log("remove clicked");
17      this.clickedIndex = null;
18    }
19  },
20});