test/e2e/async-edge-cases.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../dist/vue.min.js"></script>
  </head>
  <body>
    <!-- #4510 click and change event on checkbox -->
    <div id="case-1">
      <div @click="num++">
        {{ num }}
        <input type="checkbox" v-model="checked">
      </div>
    </div>
    <script>
    var vm1 = new Vue({
      el: '#case-1',
      data: {
        num: 1,
        checked: false
      }
    })
    </script>

    <!-- #6566 click event bubbling -->
    <div id="case-2">
      <div class="panel" v-if="expand">
        <button @click="expand = false, countA++">Expand is True</button>
      </div>
      <div class="header" v-if="!expand" @click="expand = true, countB++">
        <button>Expand is False</button>
      </div>
      <div class="count-a">
        countA: {{countA}}
      </div>
      <div class="count-b">
        countB: {{countB}}
      </div>
    </div>
    <script>
    var vm2 = new Vue({
      el: '#case-2',
      data: {
        expand: true,
        countA: 0,
        countB: 0,
      }
    })
    </script>

  </body>
</html>