点击事件中更改data中数据的值，控制页面样式，有报错

Question

<ul>
   <li v-on:click="chooseTab" v-bind:class="{active: chooseTab =='今日作业'}"><a href="javascript:;">今日作业</a></li>
   <li v-on:click="chooseTab" v-bind:class="{active: chooseTab =='所有作业'}"><a href="javascript:;">所有作业</a></li>
   <li v-on:click="chooseTab" v-bind:class="{active: chooseTab =='作业试卷'}"><a href="javascript:;">作业试卷</a></li>
   <li v-on:click="chooseTab" v-bind:class="{active: chooseTab =='作业题库'}"><a href="javascript:;">作业题库</a></li>
</ul>

var app = new Vue({
    el: '#vue-app',
    data: {
      chooseTab: '今日作业'
    },
    methods: {
       chooseTab: function(event) {
           var el = event.currentTarget;
           this.chooseTab = el.innerText;
       }
   }
})

点击第一次好使，点击第二次就报错了

感谢大家解答，谢谢。

Answer 1

data.chooseTab和methods.chooseTab的命名冲突了