upccrt/resources/js/components/AssetInfoEditModal.vue

<template>
    <modal :id="modalId" tabindex="-1" role="dialog" :aria-labelledby="`${modalId}Label`">
        <h5 slot="header" class="modal-title" :id="`${modalId}Label`">
            Edit Work Order Information
        </h5>
        <div slot="body">
            <div class="form-group">
                <label for="manufacturer">Manufacturer</label>
                <input type="text" name="manufacturer" id="manufacturer" class="form-control" v-model="asset.pcmanu">
            </div>
            <div class="form-group">
                <label for="make">Make</label>
                <input type="text" name="make" id="make" class="form-control" v-model="asset.pcmake">
            </div>
            <div class="form-group">
                <label for="nickname">Nickname</label>
                <input type="text" name="nickname" id="nickname" class="form-control" v-model="asset.pcnickname">
            </div>
            <div class="form-group">
                <label for="os">OS</label>
                <input type="text" name="os" id="os" class="form-control" v-model="asset.pcextra[2]">
            </div>
            <div class="form-group">
                <label for="serial">Serial Number</label>
                <input type="text" id="serial" name="serial" class="form-control" v-model="asset.pcextra[104]">
            </div>
            <div class="form-group">
                <label for="cpu">CPU</label>
                <input type="text" id="cpu" name="cpu" class="form-control" v-model="asset.pcextra[101]">
            </div>
            <div class="form-group">
                <label for="ram">RAM</label>
                <input type="text" name="ram" id="ram" class="form-control" v-model="asset.pcextra[100]">
            </div>
            <div class="form-group">
                <label for="graphics">Graphics</label>
                <input type="text" name="graphics" id="grapics" class="form-control" v-model="asset.pcextra[4]">
            </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="updateAsset()">
                <div v-if="!assetSaving">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,
            required: true,
        },
        modalId: {
            type: String,
            required: true,
        },
    },
    data () {
        return {
            // Essentially makes a copy of the object. Otherwise
            // We would have a reference to the exising object causing
            // unwanted mutations in the parent component.
            asset: JSON.parse(JSON.stringify(this.populateWith)),
            assetSaving: false,
        }
    },
    methods: {
        updateAsset() {
            this.assetSaving = true
            axios.put(`/api/assets/${this.asset.pcid}`, this.asset)
                    .then((response) => {
                        this.assetSaving = false
                        $(`#${this.modalId}`).modal('hide');
                    })
                    .catch((error) => {
                        this.assetSaving = false
                    });
        }
    }
}
</script>