<template>
  <div>
    <b-input v-if="isEditing" v-model="editorValue" />
    <span v-else>{{ value }}</span>
    <b-button @click="toggleEditor">{{
      isEditing ? "Speichern" : "Bearbeiten"
    }}</b-button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class InlineEditor extends Vue {
  @Prop() private value: string | undefined;

  private editorValue = "";
  private isEditing = false;

  private created() {
    this.editorValue = this.value || "";
  }

  private toggleEditor() {
    this.isEditing = !this.isEditing;
    this.$emit("input", this.editorValue);
  }
}
</script>
