Vue — Methods

Inline handlers

<template>
  <div>
    <button @click="count++">Add 1</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>

Method handlers

<template>
  <div>
    <button @click="increment">Add 1</button>
    <button @click="add(5)">Add 5</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    },
    add(amount) {
      this.count += amount
    }
  }
}
</script>

Event object

<button @click="handleClick">Click</button>

methods: {
  handleClick(event) {
    console.log(event.target) // Element
    console.log(event.type)   // "click"
  }
}

Event modifiers

<!-- Prevent default -->
<form @submit.prevent="onSubmit">Submit</form>

<!-- Stop propagation -->
<button @click.stop="handleClick">Click</button>

<!-- Only trigger once -->
<button @click.once="handleClick">Click once</button>

<!-- Self only -->
<div @click.self="handleClick">Self</div>

<!-- Capture -->
<div @click.capture="handleClick">Capture</div>

Key modifiers

<input @keyup.enter="submit">
<input @keyup.esc="cancel">
<input @keyup.ctrl.s="save">
<input @keyup.shift.enter="newline">

Mouse modifiers

<div @click.ctrl="handleClick">Ctrl + Click</div>
<div @click.left="handleLeft">Left Click</div>
<div @click.right="handleRight">Right Click</div>
<div @click.middle="handleMiddle">Middle Click</div>

Mini Practice

1. Create click handlers
2. Pass arguments to methods
3. Use event modifiers
4. Handle keyboard events

Up Next

Continue with Computed Properties - Derived state.