Замена при клике на vue.js

Question

<div class="col-md-8" v-for="api in apis">
  <div class="card-body">
    <h4 class="card-title">{{ api.title }}</h4>
  </div>
</div>


<script>
    export default {
            data() {
                return{
                    apis: null,
                }
              },
           created(){
               this.get();
              },    
           methods: {
                get(){
                    axios.post('api/v2/get).then(response => {
                        this.apis = response.data
                    })
                },
</script>

Получаю данные и вывожу в h4, как сделать чтоб при клике по этому h4 заменялось на форму input с значением h4 и при нажатии на enter или смене фокуса с input измененые данные улетали в console.log и изменялись в h4

Answer 1

const app = new Vue({
  el: "#app",
  data() {
    return {
      showInput: false,
      title: "Title"
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <div class="col-md-8">
    <div class="card-body">
      <template>
            <h4 v-if="!showInput" class="card-title" @click="showInput = true">{{ title }}</h4>
            <input v-else type="text" v-model="title" @blur="showInput = false">
          </template>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Замена при клике на vue.js

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