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,
        },
        modalId: {
            type: String,
            require: true
        },
        noteType: {
            type: Number
        },
        noteUser: {
            type: String
        },
        woid: {
            type: Number
        }
    },
    data () {
        return {
            note: {}
        }
    },
    mounted () {
        if(!this.populateWith) {
            this.note = {
                thenote: '',
                notetype: this.noteType,
                noteuser: this.noteUser,
                woid: this.woid,
            }
        } else {
            this.note = JSON.parse(JSON.stringify(this.populateWith))
        }
    },
    methods: {
        updateNote (note) {
            if (this.populateWith) {
                axios.put('/api/workorders/notes/' + note.noteid, note)
                    .then((response) => {
                        hideModal()
                    })
            } else {
                axios.post('/api/workorders/notes', note)
                    .then((response) => {
                        hideModal()
                    })
            }
        },
        hideModal () {
            $('#'+this.modalId).modal('hide')
        }
    }
}
</script>