<!--
  * inline event listener
-->

<template>
  <div>
    <text class="title">Hello {{name}}</text>
    <text class="btn" @click="update">Update 1</text>
    <text class="btn" @click="update($event)">Update 1</text>
    <text class="btn" @click="setName(temp, $event)">Update 2</text>
    <text class="btn" @click="setName('John')">Update 3</text>
  </div>
</template>

<style scoped>
  .title {font-size: 48px;}
  .subtitle {font-size: 36px;}
  .btn {font-size: 36px; text-align: center; color: white; background-color: gray; padding: 20px; border-radius: 5px;}
</style>

<script>
  module.exports = {
    data: function () {
      return {
        name: 'Steve',
        temp: 'Mike'
      }
    },
    methods: {
      update: function (e) {
        this.setName('David')
        console.log('setName', this.name)
      },
      setName: function (value) {
        this.name = value
        console.log('name', this.name)
      }
    }
  }
</script>