This repository has been archived on 2022-05-05. You can view files and clone it, but cannot push or open issues or pull requests.
userausfall/src/components/InlineEditor.vue

31 lines
672 B
Vue
Raw Normal View History

2021-04-15 11:36:21 +02:00
<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>