Computer scienceFrontendVue.jsVue 3 SyntaxVue Directives

v-on

Focus event

Report a typo

Look at the code below. What does @focus do in this example?

<template>
  <input type="text" @focus="changeBackground" @blur="resetBackground" v-bind:style="{backgroundColor: bgColor}">
</template>

<script>
export default {
  data() {
    return {
      bgColor: ''
    };
  },
  methods: {
    changeBackground() {
      this.bgColor = 'yellow';
    },
    resetBackground() {
      this.bgColor = '';
    }
  }
}
</script>

Select one option from the list

This code won't work.

Nothing happens.

When you focus on the input, the resetBackground method is run, resetting the background color.

When you focus on the input, the changeBackground method is run, changing the background color of the input.

___

Create a free account to access the full topic