31 lines
672 B
Vue
31 lines
672 B
Vue
|
<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>
|