How to switch between input and text?

Question

Vue.js

It is necessary to make an input where the full name is entered. After entering, the input disappears, but the entered text remains and a checkmark appears next to it.

Answer 1

The two properties are the user input value and the state (input activity). v-ifEither input or span ( / v-else) is displayed depending on the state . Something like this :

<input v-if="input" v-model="name" @keypress.enter="onEnter">
<span v-else v-text="name" @click="onClick"></span>

data: () => ({
  name: '',
  input: true,
}),
methods: {
  onEnter() {
    if (this.name) {
      this.input = false;
    }
  },
  onClick() {
    this.input = true;
  },
},