vue中用v-for渲染出表格，如何使点击的那格渲染出class？

Question

需要的效果是，点击表格中的任意一格，那一格就渲染对应的class，其他的格子不渲染该class。

html是这样的：

<ul v-for="(d, i) in day">
    <li v-for="(item, index) in d" @click="getItem(item, index, i)" :class="{ active: addClass == [i][index] }">
        {{ item.text }}
    </li>
</ul>

js是这样的：

export default {
    data() {
      return {
          addClass: ''
      }
    },
    methods: {
        getItem: function (item,i,index) {
            this.addClass = [i][index]
        }
    }
 }

这样的话只有第一列的li能够实现点击渲染出class，而点击非第一列的时候，非第一列的所有li都渲染出这个class。

点击第一列：

点击第二列的随便一格：

点击非第一列的时候，consol.log(this.addClass)打印出来的是undefined，而点击第一列的时候则不会。

这是为什么呢？应该如何解决这个问题？

Answer 1

我的思路是用二维矩阵的展现形式来看比较简明

00 01 02 03 04 05 06 
10 11 12 13 14 15 16
20 21 22 23 24 25 26
30 31 32 33 34 35 36
40 41 42 43 44 45 46
50 51 52 53 54 55 56

相当于每个格子都有一个独立的id了, 点击哪个就把对应的行号与列号穿入, 然后再判断

然后贴代码

  <table>
    <tr v-for="(trItem, trIndex) in tableData">
      <td :class="{active: addClass===trIndex.toString()+tdIndex.toString()}" :data-id="trIndex.toString()+tdIndex.toString()" v-for="(tdItem, tdIndex) in trItem.td" @click="toggleActive(trIndex,tdIndex)">{{tdItem}}</td>
    </tr>
  </table>

  export default {
    data () {
      return {
        addClass: '',
        tableData: [
          {
            td: [11, 12, 13, 14, 15, 16, 17, 18, 19]
          },
          {
            td: [21, 22, 23, 24, 25, 26, 27, 28, 29]
          },
          {
            td: [31, 32, 33, 34, 35, 36, 37, 38, 39]
          },
          {
            td: [41, 42, 43, 44, 45, 46, 47, 48, 49]
          },
          {
            td: [51, 52, 53, 54, 55, 56, 57, 58, 59]
          },
          {
            td: [61, 62, 63, 64, 65, 66, 67, 68, 69]
          }
        ]
      }
    },
    methods: {
    //      穿入行号列号
      toggleActive (i, j) {
        this.addClass = i.toString() + j.toString()
        console.log(this.addClass)
      }
    }
  }

预览图

Answer 2

可以使用在内联语句处理器中访问原始的 DOM 事件来完成所需功能：

// HTML
<ul class="parent" v-for="(d, i) in day">
    <li v-for="(item, index) in d" @click="getItem($event)">
        {{ item.text }}
    </li>
</ul>

// JS
getItem(event) {
    // 现在我们可以访问原生事件对象
    const $target = event.target
    $target.className = $target.className.indexOf('active') === -1 ? 'active' : ''
}