upccrt/resources/js/components/NoteFormModal.vue

<template>
    <modal :id="modalId" tabindex="-1" role="dialog" :aria-labelledby="modalId+'Label'">
        <h5 slot="header" class="modal-title" :id="modalId+'Label'">
            Edit Note
        </h5>
        <div slot="body">
            <div class="form-group">
                <label for="content">Content</label>
                <textarea :name="'content'+note.noteid" :id="'content'+note.noteid" class="form-control" v-model="note.thenote"></textarea>
            </div>
        </div>
        <div slot="footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" @click="updateNote(note)">
                <div v-if="!noteSaving">Save</div>
                <circle-spinner v-else :size="2"></circle-spinner>
            </button>
        </div>
    </modal>
</template>
<script>
import Modal from '../components/Modal.vue'
import CircleSpinner from '../components/CircleSpinner.vue'
export default {
    components: {
        Modal,
        CircleSpinner,
    },
    props: {
        populateWith: {
            type: Object,
            require: true
        },
        modalId: {
            type: String,
            require: true
        },
        noteType: {
            type: Number
        },
        noteUser: {
            type: String
        },
        woid: {
            type: Number
        }
    },
    data () {
        return {
            note: JSON.parse(JSON.stringify(this.populateWith)),
            noteSaving: false
        }
    },
    methods: {
        updateNote (note) {
            this.noteSaving = true
            axios.put('/api/workorders/notes/' + note.noteid, note)
                .then((response) => {
                    this.noteSaving = false
                    this.hideModal()
                })
        },
        hideModal () {
            $('#'+this.modalId).modal('hide')
        }
    }
}
</script>