1
<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

1 ответ 1

2

const app = new Vue({
  el: "#app",
  data() {
    return {
      showInput: false,
      title: "Title"
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></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>

1
  • А как еще добавить вывод в консоль новых данных при смене фокуса ? 10 апр 2020 в 10:56

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.