Vue Inline edit

InputEdit.vue

<template>
    <div>
        <span v-show="!editing"
              @click="toggleEdit" v-html="showValue"></span>

        <div v-show="editing" class="row">
            <div class="col-md-10">
                <div class="form-group">
                    <textarea class="form-control"
                              rows="3"
                              v-model="value"
                              ref="value"></textarea>
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary btn-sm" @click="save">Opslaan</button>
            </div>
        </div>

    </div>
</template>

<script>

    import axios from "axios";

    export default {

        props: ['url', 'name', 'text'],

        data () {
            return {
                editing: false,
                value: this.text
            }
        },

        computed: {
            showValue () {
                return this.value === '' ? "—" : this.value.replace(/\n/gm, '<br>')
            }
        },

        methods: {
            toggleEdit () {
                this.editing = !this.editing;
                Vue.nextTick(() => {
                    this.$refs.value.focus();
                });
            },
            save () {
                let data = {};
                data[this.name] = this.value;

                axios.put(this.url, data)
                    .then(() => {
                        this.toggleEdit();
                    })
                    .catch( (err) => {
                        alert(err);
                    });
            }
        }

    }
</script>