<template>
  <h1>v-on Example</h1>
  <p>The '.self' modifier is set on the parent element. </p>
  <p>Click on the child element and see how the event propagates past the parent element because the parent click event only reacts to click on the element itself.</p>
  <div v-on:click="addMsg('grandParent')" id="grandParent">
    Grandparent element
    <div v-on:click.self="addMsg('parent')">
      Parent element.
      <div v-on:click="addMsg('child')">
        Child element. CLICK HERE!
      </div>
    </div>
  </div>
  <p>The order of when and where the event is captured.</p>
  <ol>
    <li v-for="x in msg">{{ x }}</li>
  </ol>
</template>

<script>
export default {
  data() {
    return {
      msg: []
    };
  },
  methods: {
    addMsg(txt) {
      this.msg.push(txt);
    }
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
  cursor: pointer;
}
#grandParent {
  width: 250px;
  background-color: lightpink;
}
#grandParent > div {
  background-color: lightgreen;
}
#grandParent > div > div {
  background-color: lightskyblue;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')