upccrt/resources/js/components/WoInfoEditModal.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>
            <autocomplete-custom-dropdown :options="storeList" :value="this.store" v-model="store"></autocomplete-custom-dropdown>
            <!-- <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>
import Modal from '../components/Modal'
import AutocompleteCustomDropdown from '../components/AutocompleteCustomDropdown'
export default {
    components: {
        Modal,
        AutocompleteCustomDropdown
    },
    props: {
        populateWith: {
            type: Object,
            required: true,
        },
        storeList: {
            type: Array,
            required: true,
        },
        modalId: {
            type: String,
            required: true,
        },
    },
    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)),
            id: this.modalId,
            store: {},
            errors: []
        }
    },
    methods: {
        updateWorkOrder() {
            this.data.storeid = this.store.id
            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; });
        }
    },
    mounted () {
        this.store = {
            'id': this.data.storeid,
            'name': this.storeList[this.data.storeid]
        }
    },
    // This was originally here because the populateWith info would originally
    // not necessarily be loaded when this component was mounted. That is no
    // longer the case as I now don't render the parent component until the
    // ajax request is finised. The watch statements are still here to cover
    // the case where someone else updates the populateWith values while
    // someone is editing, although it probably should be edited so it doesn't
    // immediately overwrite the unsaved edits of the current user.
    watch: {
        populateWith: function (value) {
            this.data = JSON.parse(JSON.stringify(this.populateWith))
            this.store = {
                'id': this.data.storeid,
                'name': this.storeList[this.data.storeid]
            }
        },
        storeList: function (value) {
            this.store = {
                'id': this.data.storeid,
                'name': this.storeList[this.data.storeid]
            }
        }
    }
}
</script>