vue クラスのオンオフで選択した以外のtdを解除

<template>
  <tr>
    <td v-on:click="isActive=!isActive" v-bind:class="{ 'active' : isActive }">hoge</td>
  </tr>
</template>

このような形で、tdを選択した行に特定のクラスを筑うようにしているのですが、
（上記を親コンポーネントよりループで読み込んでいます。）
選択した以外のtdは.activeの指定を解除したいのですがvueの場合はどのように行いますでしょうか？

$("td").removeClass("active");

jqueryの場合は、addClassの前に上記を行えばよかっただけですが、
vueの場合も上記のようなものがあるんでしょうか？

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

回答1件

ベストアンサー

選択した以外のtdの.activeの指定を解除するという考え方ではなく、現在選択している行を持ってその行のみ.activeを有効にするという考え方で実現できます。
動作するコードを書きましたので参考にしてください。

・親コンポーネントに、現在選択中の行を持つ
・子コンポーネントは現在選択中の行をプロパティとして受け取り、それが自身であれば.activeクラスを有効にする
・子コンポーネントはクリックされたとき自身を引数にしたイベントを発生させ、親コンポーネントの現在選択中の行を更新
……という仕組みになっています。

html
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://cdn.jsdelivr.net/npm/vue"></script>
5<style>
6.active { background-color: yellow; }
7</style>
8</head>
9<body>
10
11<div id="vueApp">
12
13<table border=1>
14  <tr><th>title</th></tr>
15  <tr is="activable-row" v-bind:active-row="activeRow" v-on:click="activeRow = $event;"></tr>
16  <tr is="activable-row" v-bind:active-row="activeRow" v-on:click="activeRow = $event;"></tr>
17  <tr is="activable-row" v-bind:active-row="activeRow" v-on:click="activeRow = $event;"></tr>
18</table>
19
20</div>
21
22<script>
23Vue.component('activable-row', {
24  props: ["activeRow"],
25  template: `
26    <tr>
27       <td v-bind:class="{ 'active' : this.activeRow == this }" v-on:click="onClick">hoge</td>
28    </tr>
29  `,
30  methods:{
31    onClick: function(){ this.$emit('click', this); }
32  },
33});
34
35new Vue({
36  el: '#vueApp',
37  data: { activeRow: null }
38});
39</script>
40
41</body>
42</html>