Егор Астрейко

<template>
  <div>
    <input type="text" class="input__field"
        :value="value"
        :ref="'input'"
        @input="onChange($event.target.value)"/>
  </div>
</template>

export default {
  name: "CInput",
  props: {
    value: {
      type: [String, Number],
      required: true
    },
  },
  mounted() {
    this.$emit("ref", this.$refs.input)
  },
  methods: {
    onChange(val) {
      this.$emit('value', val)
    },
  }
}

<template>
  <div>
    <div class="complex-item__content" @keydown.esc="close">
      <span v-show="!editTitle"
          class="complex-item__title"
          @dblclick="showEditTitle">{{ content.title }}</span>
          <c-input v-show="editTitle"
              class="input complex-item__edit-title"
              @ref="input = $event"
              :value="edit.title"
              @value="edit.title = $event"
              @keydown.ctrl.enter="endEdit(content.key, edit.title, null)" />
    </div>
  </div>
</template>

import CInput from "@/components/CInput";

export default {
  name: "Item",
  components: {
    CInput
  },
  props: {
    content: {
      type: Object,
      required: true
    },
    editTitleTodo: {
      type: Function,
      required: true
    },
  },
  data() {
    return {
      edit: {
        title: this.content.title,
      },
      editTitle: false,
    }
  },
  methods: {
    close() {
      this.editTitle = false
    },
    showEditTitle() {
      this.editTitle = true
      this.$nextTick(() => {
        this.input.focus()
      })
    },
    endEdit(id, title) {
      this.editTitleTodo(id, title)
      this.editTitle = false
    },
  }
}