edit-job.vue

<template>
    <div>
       <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Edit Job</h4>
        </div>
        <div class="modal-body">
            <form method="post" @submit.prevent="signIn" @keydown="errors.clear($event.target.name)">
                <div class="form-group">
                    <label>{{ id }} Job Name</label>
                    <input type="text" class="form-control" placeholder="Web Developer" :value="name">
                    <span v-text="errors.get('name')" class="text-danger help-block"></span>
                </div>

                <div class="form-group">
                    <label>Job Summary</label>
                    <textarea class="form-control" v-model="summary"></textarea>
                    <span v-text="errors.get('summary')" class="text-danger help-block"></span>
                </div>

                <div class="form-group">

                    <div class="col-sm-6" style="padding-left: 0px;">
                        <label>Salary Type</label>
                        <select class="form-control" v-model="salarytype">
                            <option value="">Select an option</option>
                            <option value="hourly">Hourly</option>
                            <option value="weekly">Weekly</option>
                            <option value="fortnightly">Fortnightly</option>
                            <option value="monthly">Monthly</option>
                        </select>
                        <span v-text="errors.get('salarytype')" class="text-danger help-block"></span>
                    </div>

                    <label>Salary</label>
                    <div class="col-sm-6 input-group">
                        <input type="number" v-model="salaryfrom" class="form-control" placeholder="24,000"">
                        <span class="input-group-addon">-</span>
                        <input type="number" v-model="salaryto" class="form-control" placeholder="34,000">
                        <span v-text="errors.get('salaryfrom')" class="text-danger help-block"></span>
                        <span v-text="errors.get('salaryto')" class="text-danger help-block"></span>
                    </div>
                </div>

                <div class="form-group col-sm-6" style="padding:0px;">
                    <label>Job Location</label><br/>
                    <select class="form-control" v-model="location" @change="onChange($event.target.value)">
                        <option>Select an option</option>
                        <option v-for="(value, key) in countries" :value="key">{{ value }}</option>
                    </select>
                    <span v-text="errors.get('location')" class="text-danger help-block"></span>
                </div>

                <div class="form-group col-sm-6">
                    <label>Contact Details</label>
                    <input type="email" v-model="contactemail" class="form-control" placeholder="John Doe">
                    <span v-text="errors.get('contactemail')" class="text-danger help-block"></span>
                </div>

                <label>Contact Number</label>
                <div class="form-group input-group">
                    <span class="input-group-addon">
                        <i class="fa fa-phone"></i>
                    </span>
                    <input type="tel" v-model="contactphone" class="form-control" placeholder="+4407584457483">
                    <span v-text="errors.get('contactphone')" class="text-danger help-block"></span>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-info btn-fill btn-wd" v-on:click="addJob">Save</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</template>

<script>

    class Errors
    {
        constructor()
        {
            this.errors = {};
        }

        get(field){
            if(this.errors[field]){
                return this.errors[field][0]
            }
        }

        any(){
            console.log(Object.keys(this.errors).length);
            return Object.keys(this.errors).length > 1;
        }

        record(errors){
            this.errors = errors;
        }

        clear(field){
            delete this.errors[field];
        }
    }

    export default
    {
        props: ['id'],
        data: function ()
        {
            return {
                countries: [],
                name: '',
                summary: '',
                salarytype: '',
                salaryfrom: '',
                salaryto: '',
                location: '',
                contactemail: '',
                contactphone: '',
                errors: new Errors()
            }
        },

        methods:
        {
            addJob: function()
            {
                axios.post('/jobs/edit' + this.id, this.$data)
                .then(response => {
                    if(response.data.status === true){
                        $('#editJob').modal('hide');
                        getJobTable();
                    }
                    else{
                        formError = response.data.message;
                    }
                })
                .catch(error => this.errors.record(error.data))
            }
        },

        mounted: function()
        {
            axios.get('/jobs/my-job/' + this.id)
                .then(response => {
                    this.name = response.data.name
                    this.summary = response.data.summary
                    this.salarytype = response.data.salary_type
                    this.salaryfrom = response.data.salary_from
                    this.salaryto = response.data.salary_to
                    this.location = response.data.location
                    this.contactemail = response.data.contact
                    this.contactphone = response.data.phone
                })

            axios.get('/countries')
                .then(response => {
                    this.countries = response.data;
                })
        }
    }
</script>