Click on the event to change the value of the data in data, control the page style, and report an error.

<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: "-sharpvue-app",
    data: {
      chooseTab: ""
    },
    methods: {
       chooseTab: function(event) {
           var el = event.currentTarget;
           this.chooseTab = el.innerText;
       }
   }
})

Click the first time to work, and click the second time to report an error

clipboard.png

Thank you for your answer, thank you.

Jul.22,2021
The naming of

data.chooseTab and methods.chooseTab conflicts

Menu