Добавить общую сумму для каждого списка индексов vuejs

Итак, у меня есть возможность добавить карточку задания на транспортное средство с работами. Итак, я пытаюсь показать сумму двух входных данных, называемых платой за покраску и плату за вмятину, для расчетной суммы, введенной для индексированного элемента, то есть, когда я нажимаю кнопку Add item. будет заполнено 4 входными значениями: «Описание», «Затраты на покраску», «Заплата за вмятину», «Сумма EST»).

Код Вуэйса

<template>
    <div>
        <form v-on:submit.prevent = "save" >
            <h3 class = "text-center py-2 font-weight-bold"><template v-if = "edit_id">Edit</template><template v-else>Add</template> Jobcard</h3>
            <div class = "row">
                <div class = "col-md-3">
                    <div class = "form-group">
                        <label>Chasis No:</label>
                        <input type = "text" v-model = "jobcard.chasis_no"  class = "form-control" required = "" placeholder = "Chasis No">
                    </div>
                </div>
                <div class = "col-md-3">
                    <div class = "form-group">
                        <label>Model:</label>
                        <select class = "form-control" v-model = "jobcard.model" required >
                            <option value = "">Select a Model</option>
                            <option v-for = "model in models" :value = "model.name">{{ model.name }}</option>
                        </select>
                        <!-- <small v-if = "errors.role" class = "text-danger">{{ errors.role[0] }}</small> -->
                    </div>
                </div>

                <div class = "col-md-3">
                    <div class = "form-group">
                        <label>Color:</label>
                        <select class = "form-control" v-model = "jobcard.color" required >
                            <option value = "">Color</option>
                            <option v-for = "color in colors" :value = "color.name">{{ color.name }}</option>
                        </select>

                    </div>
                </div>
            </div>
            <div class = "row">
                <div class = "col-md-3">
                    <div class = "form-group">
                        <label>Supervisor:</label>
                        <select class = "form-control" v-model = "jobcard.supervisor" required >
                            <option value = "">Supervisor</option>
                            <option v-for = "supervisor in supervisors" :value = "supervisor.name">{{ supervisor.name }}</option>

                        </select>

                    </div>
                </div>
                <div class = "col-md-3">
                    <div class = "form-group">
                        <label>Techinician:</label>
                        <select class = "form-control" v-model = "jobcard.technician" required >
                            <option value = "">Techinician</option>
                            <option v-for = "technician in technicians" :value = "technician.name">{{ technician.name }}</option>

                        </select>

                    </div>
                </div>
                <div class = "col-md-3">
                    <div class = "form-group">
                        <label>Jobcard Type:</label>
                        <select class = "form-control" v-model = "jobcard.jobcard_type" required >
                            <option value = "">Type</option>
                            <option v-for = "type in types" :value = "type.name">{{ type.name }}</option>

                        </select>

                    </div>
                </div>
                <div class = "col-md-3">
                    <div class = "form-group">
                        <label>Remark:</label>
                        <input type = "text" v-model = "jobcard.remark"  class = "form-control"  placeholder = "Remarks if any">
                    </div>
                </div>

            </div>
            <div class = "table-responsive">

                <table class = "table table-bordered">
                    <thead>
                        <th>#</th>
                        <th>Description</th>
                        <th>Painting Charge</th>
                        <th>Denting Charge</th>
                        <th>EST Amount</th>
                        <th></th>
                    </thead>
                    <tbody>
                        <tr v-for = "(item,key) in items">
                            <td>
                                {{ key+1 }}
                            </td>
                            <td>
                                <input type = "text" v-model = "item.description"  class = "form-control" required = "" placeholder = "Description" autocomplete = "on">

                            </td>

                            <td>
                                <input type = "text" pattern = "[0-9.]{1,}" v-model = "item.painting_charge"  class = "form-control" required = "" placeholder = "Painting Charge" >
                            </td>
                            <td>
                                <input type = "text" pattern = "[0-9.]{1,}" v-model = "item.denting_charge" class = "form-control" required = "" placeholder = "Denting Charge" >
                            </td>
                            <td>
                                <input type = "text" pattern = "[0-9.]{1,}" v-model = "item.est_amount" class = "form-control" required = "" placeholder = "Estimated Amount" >
                            </td>
                            <td>
                                <button type = "button" class = "btn btn-sm btn-danger" @click = "deleteItem(key,item.id)">X</button>
                            </td>
                        </tr>
                        <tr v-if = "items.length<10">
                            <td colspan = "100%" class = "text-center">
                                <button type = "button" class = "btn btn-sm btn-primary"  @click = "add_item()">Add Item</button>
                            </td>
                        </tr>
                        <tr>
                            <th colspan = "3" class = "text-center">Total: ₹{{ total }}</th>
                            <th colspan = "6" class = "text-center">In words: {{ total | toWords }} Rupees Only</th>
                        </tr>
                        <tr>
                            <td colspan = "100%" class = "text-center" >
                                <button class = "btn btn-success" :disabled = "items.length < 1">Submit</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </form>
    </div>
</template>

<script>


export default {
   
    props:['edit_id','models','variants','colors','supervisors','technicians','types'],
    created(){
        if (this.edit_id)
        {
            this.edit()
        }
        else
            this.add_item();
    },
    data () {
        return {
            shiner:{

            },
            loader  : '/loader/loader.gif',
            loading : false,
            errors  : {},
            jobcard_id : '',
            jobcard : {
                id: '',
                chasis_no: '',
                color: '',
                model: '',
                variant: '',
                supervisor: this.supervisors[0].name,
                technician: this.technicians[0].name,
                jobcard_type: '',
                remark: '',
            },
            deleted : [],
            item : {
                description : '',
                labour_type : '',
                painting_charge : '0',
                denting_charge : '0',
                est_amount : '',

            },
            items : [],
        }
    },
    methods : {
        add_item()
        {
            if (this.items.length < 10)
            {
                this.items.push(Object.assign({}, this.item));
            }
            else
            {
                swal('Maximum Limit Reached','','error')
            }
        },
   
        deleteItem(array_index,id)
        {
            var deleted = this.items.splice(array_index,1);
            if (id)
                this.deleted.push(id)
        },
    
        save() {
            swal({
              title: "Confirm",
              text: "Are you sure?",
              icon: "warning",
              buttons: true,
                })
            .then((value) => {
                if (value)
                {
                     axios.post('/jobcards',{
                        jobcard : this.jobcard,
                        items: this.items,
                        deleted: this.deleted
                     }).
                     then(response => {
                         swal((this.edit_id)? 'Jobcard Updated':'Jobcard Added','','success')
                         .then((value) => {
                            this.jobcard_id = '';
                            this.clear_data();
                            window.location.href = ('/dash');


                         });

                     }).
                    catch(error => {
                        console.info(error);
                        swal("Error");
                        // this.searching = false;
                    });
                }
            });

        }
    },
    computed: {
      total(){
        return this.items.reduce(function(total, item){
            if (item.painting_charge||item.denting_charge){
                return total + parseInt(item.painting_charge)+parseInt(item.denting_charge) ;
            }
            return total;
        },0);
      },

    },
}
</script>

<style lang = "css" scoped>

</style>