Let's talk about the v-on parameter problem in Vue

<div class="groupbody">
   <ul class="list">
     <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange($event)">
       <div class="pagecelltext">{{ cell.left }}</div>
       <div class="pagecellmin">{{ cell.min }}</div>
       <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear"></div>
</div>

exchange: function (event) {
            alert("Start executing method");
            var a = event.target;
            var cellimg = a.getElementsByTagName("div")[0];
            var msg = cellimg.innerText; 
            page2datas.todos[0].groupheader = msg;
            alert("Method is executing"); 
            var b = document.getElementById("page1");
            b.style.display = "none";
            var c = document.getElementById("page2");
            c.style.display = "block";
            alert("Method execution ended");
          }

<div class="groupbody">
   <ul class="list">
     <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange(cell)">
       <div class="pagecelltext">{{ cell.left }}</div>
       <div class="pagecellmin">{{ cell.min }}</div>
       <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear"></div>
</div>

 exchange: function (cell) {
        alert("Start executing method"); 
        page2datas.todos[0].groupheader =cell.left;
        alert("Executing");
        var b = document.getElementById("page1");
        b.style.display = "none";
        var c = document.getElementById("page2");
        c.style.display = "block";
        alert("Method execution ended");
      }

 <button @click="btnClick">Click</button>
 <script>
 const app = new Vue({
  methods:{
  btnClick(event){
  // At this time, event is the object currently clicked console.log(event)
  }
  }
 })
 </script>

<button @click="btnClick()">Click</button>
<script>
 const app = new Vue({
 methods:{
  btnClick(event){
  // At this time event is undefined
  console.log(event)
  }
 }
 })
</script>

<button @click="btnClick(123)">Click</button>
<script>
 const app = new Vue({
 methods:{
  btnClick(event){
  // At this time, event is 123
  console.log(event)
  }
 }
 })
</script>

<!-- In this case, if you need to pass the currently clicked object, the parameter must be $event -->
<!-- If you want to pass a number in the first position, you don't need to add quotation marks. If you want to pass a string, you must add quotation marks. If you don't add quotation marks, Vue will parse it as a variable. If it is not defined in data, an error will be reported. -->
<button @click="btnClick(123,$event)">Click</button>
<script>
 const app = new Vue({
 methods:{
  btnClick(num,event){
  // At this time, num is 123, event is the object currently clicked,
  console.log(num,event)
  }
 }
 })
</script>