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，而点击第一列的时候则不会。

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