vue中v-on:clock的使用

最近在學習vue.js框架。記下其中遇到的一些問題，以便以後查閱。
首先，這是一個頁面(為了便於觀察，將各個標籤都一一著色)：

其中html程式碼：

<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>

js部分的程式碼：

 exchange: function (event) {
                        alert("開始執行方法");
                        var a = event.target;
                        var cellimg = a.getElementsByTagName("div")[0];
                        var msg = cellimg.innerText
 
; 
                        page2datas.todos[0].groupheader = msg;
                        alert("方法執行中"); 
                        var b = document.getElementById("page1");
                        b.style.display = "none";
                        var c = document.getElementById("page2");
                        c.style.display = "block";
                        alert("方法執行結束");
                    }

這時候如果點選cell中有顏色的區域(即點選li標籤的字標籤的時候)，只有第一個alert( )方法執行，而後面的兩個方法並不執行。

原因就是這個方法的引數event：
如果標籤繫結的方法中有引數$event，這時候就可以利用event.target,獲取到當前點被繫結這個點選事件的標籤。
但是這個引數也可能會造成一些問題，比如如果想不論點選li標籤的哪一個部分都要把點選事件的方法執行完整，這時候引數event就不適用了。這時候只能另想其他辦法。
解決方法：
在li中有v-for迴圈，其中有一個cell物件，這個物件居居士li標籤中的資料。只需要把這個物件傳遞給點選事件的方法，就可以通過這個物件去實現剛才想要達到的目的。
修改之後的html程式碼：

<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>

修改之後的js程式碼：

 exchange: function (cell) {
               alert("開始執行方法"); 
               page2datas.todos[0].groupheader =cell.left;
               alert("執行中");
               var b = document.getElementById("page1");
               b.style.display = "none";
               var c = document.getElementById("page2");
               c.style.display = "block";
               alert("方法執行結束");
           }

這時候，整個電擊事件的執行方法都可以完整執行下來，後續頁面的切換也可以完成。