v-on

Here, practice changing the existing method in v-on directive to updateUserInput. Write the new expression starting with v-on in the text field.

<template>
  <input v-on:input="showConsoleMessage" placeholder="Type something..." />
  <p>You typed: {{ userInput }}</p>
</template>

<script>
export default {
  data() {
    return {
      userInput: ''
    }
  },
  methods: {
    updateUserInput(event) {
      this.userInput = event.target.value;
    },
    showConsoleMessage() {
      console.log('Input value was changed')
    }
  }
}
</script>