Как переключаться между инпутом и текстом?

Question

[richrichwx]

Необходимо сделать input, куда вводится ФИО. После того как ввел, input исчезает, а введенный текст остается и около него появляется галочка.

Comments

[Roman Sokolov]

А как определять, что уже ввели ФИО? Нужно пользователю кнопку нажимать после того, как он ввел свои данные.

Answer 1

[0xD34F]

Два свойства - вводимое пользователем значение и состояние (активность ввода). В зависимости от состояния отображается input или span (v-if / v-else). Как-то так:

<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;
  },
},

Comments

[Сергей delphinpro]

jsfiddle.net/d6x49vrg/2