upccrt/resources/js/components/note-form-modal.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)">Save</button>
                </div>
            </modal>
</template>
<script>
export default {
    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))
        }
    },
    methods: {
        updateNote (note) {
            axios.put('/api/workorders/notes/' + note.noteid, note)
                .then((response) => {
                    hideModal()
                })
        },
        hideModal () {
            $('#'+this.modalId).modal('hide')
        }
    }
}
</script>