Изменить параграф на Input vue.js

Question

Подскажите пожалуйста, как при клике к примеру на <p>Нажми меня</p> превратить его в <input>Нажми меня</input> и при клике на Enter или фокуса вывести сообщение в консоль ?

У меня есть вывод значений из базы Имя, Фамилия,Отчество для отображения пользователю,

<div class="col-md-8"> 
  <div class="card-body"> 
    <h4 class="card-title">{{ api.attributes.surname }}</h4> 
    <h4 class="card-title">{{ api.attributes.name }}</h4> 
  </div> 
</div>

Вот хотелось бы при клике на имя иметь сразу же возможность редактировании этого поля и записи его в базу

Answer 1

Вот пример того как это можно сделать с одним полем:

new Vue({
  el: "#app",
  data: {
    first_name: 'First Name',
    firstNameEdit: false,
  },
  methods: {
  	submit(){
    	console.log(this.first_name);
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-if="firstNameEdit">
      <input v-model="first_name" v-on:keyup.enter="submit" v-on:keyup.escape="firstNameEdit = false">
  </div>
  <div v-else v-on:click="firstNameEdit = true">
    {{first_name}}
  </div>
</div>

При клике на h1 мы переключаем логическую переменную, которая отвечает что мы показываем (h1 или input)

При нажатии на enter когда input в фокусе, сработает метод submit

При нажатии на escape вы можете закрыть input

БЛОГ НА HUSL

Изменить параграф на Input vue.js

Ответы (1 шт):