upccrt/resources/js/components/woinfo-edit-modal.vue

<template>
<modal :id="id" tabindex="-1" role="dialog" :aria-labelledby="id+'Label'">
    <h5 slot="header" class="modal-title" :id="id+'Label'">
        Edit Work Order Information
    </h5>
    <div slot="body">
        <div class="form-group">
            <label for="probdesc">Problem Description</label>
            <textarea id="probdesc" name="probdesc" :class="{'form-control': true, 'is-invalid': errors.probdesc}" v-model="data.probdesc"></textarea>
            <errorlist :errors="errors.probdesc"></errorlist>
        </div>
        <div class="form-group">
            <label for="suggested">Suggested Solution</label>
            <textarea id="suggested" name="suggested" :class="{'form-control': true, 'is-invalid': errors.suggested}" v-model="data.suggested"></textarea>
            <errorlist :errors="errors.suggested"></errorlist>
        </div>
        <div class="form-group">
            <label for="storelist">Store</label>
            <select name="storelist" id="storelist" class="form-control" v-if="storeList" v-model="data.storeid">
                <option v-for="store in storeList" v-bind:key="store.storeid" v-bind:value="store.storeid">
                    {{ store.storesname }}
                </option>
            </select>
        </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="updateWorkOrder()">Save</button>
    </div>
</modal>
</template>
<script>
export default {
    props:['populateWith', 'storeList', 'modalId'],
    data() {
        return {
            // Copies object from prop, so it doesn't mutate the object
            // from the parent component. Parent component will be updated via
            // Websocket if updateWorkOrder is successful.
            data: JSON.parse(JSON.stringify(this.populateWith)),
            storeArray: this.storeList,
            id: this.modalId,
            errors: []
        }
    },
    methods: {
        updateWorkOrder() {
            axios.put('/api/workorders/' + this.data.woid, this.data)
                .then((response) => { $('#workordereditModal').modal('hide'); })
                .catch((error) => { this.errors = JSON.parse(error.response.request.response).errors; });
        }
    }
}
</script>