upccrt/resources/js/components/assetinfo.vue

<template>
    <div>
        <modal id="asseteditModal" tabindex="-1" role="dialog" aria-labelledby="asseteditModalLabel">
            <h5 slot="header" class="modal-title" id="asseteditModalLabel">
                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.lazy="data.pcmanu">
                </div>
                <div class="form-group">
                    <label for="make">Make</label>
                    <input type="text" name="make" id="make" class="form-control" v-model.lazy="data.pcmake">
                </div>
                <div class="form-group">
                    <label for="nickname">Nickname</label>
                    <input type="text" name="nickname" id="nickname" class="form-control" v-model.lazy="data.pcnickname">
                </div>
                <div class="form-group">
                    <label for="os">OS</label>
                    <input type="text" name="os" id="os" class="form-control" v-model.lazy="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.lazy="pcextra[104]">
                </div>
                <div class="form-group">
                    <label for="cpu">CPU</label>
                    <input type="text" id="cpu" name="cpu" class="form-control" v-model.lazy="pcextra[101]">
                </div>
                <div class="form-group">
                    <label for="ram">RAM</label>
                    <input type="text" name="ram" id="ram" class="form-control" v-model.lazy="pcextra[100]">
                </div>
                <div class="form-group">
                    <label for="graphics">Graphics</label>
                    <input type="text" name="graphics" id="grapics" class="form-control" v-model.lazy="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()">Save</button>
            </div>
        </modal>
        <h4 class="text-center">{{ this.data.pcmanu }} {{ this.data.pcmake }} - <small class="text-muted">{{this.data.pcnickname}}</small></h4>
        <p>OS: {{this.pcextra[2]}}</p>
        <p>S/N: {{ this.pcextra[104] }}</p>
        <p>CPU: {{ this.pcextra[101]}}</p>
        <p>RAM: {{ this.pcextra[100] }}</p>
        <p>Graphics: {{this.pcextra[4]}}</p>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#asseteditModal">Edit</button>
    </div>
</template>
<script>
export default {
    props: ['asset', 'pcextraStart'],
    data() {
        return {
            data: JSON.parse(this.asset),
            pcextra: JSON.parse(this.pcextraStart),
        }
    },
    mounted() {
        Echo.channel('assets')
                .listen('AssetUpdated', (e) => {
                this.data = JSON.parse(e.data);
                this.pcextra = JSON.parse(e.pcextra);
            });
    },
    methods: {
        updateAsset() {
            this.data.pcextra = this.pcextra;
            axios.put('/api/assets/' + this.data.pcid, this.data)
                    .then((response) => {})
                    .catch((error) => {});
                $('#asseteditModal').modal('hide');
        }
    }
}
</script>