为每个索引列表添加总金额vuejs

Question

所以我想添加带有工程的车辆工作卡。所以我想要的是我需要显示总共两个输入，称为喷漆费用和凹痕费用，以估计索引项目的输入金额，意思是当我单击

Add item时

按钮将填充 4 个输入值描述、喷漆费用、凹痕费用、EST 金额）。

Vuejs 代码

<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.log(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>

当前视图

Answer 1

您可以尝试创建一个新方法，该方法将

item

作为参数，并返回其绘画费用 (

painting_charge

) 和您的凹陷费用 (

denting_charge

) 的总和

methods : {
    // ...
    calculateEstimatedAmount(item) {
        return parseFloat(item.painting_charge || 0) + parseFloat(item.denting_charge || 0);
    },
    // ...
}

现在更新您的模板，尝试调用新方法

:value="calculateEstimatedAmount(item)"

将估计金额值输入字段绑定到

calculateEstimatedAmount

方法上的结果。由于它是计算值，您可能需要将输入字段设置为

readonly

。

<tbody>
    <tr v-for="(item,key) in items">
        <!-- tds -->
        <td>
            <input type="text" pattern="[0-9.]{1,}" :value="calculateEstimatedAmount(item)" class="form-control" readonly placeholder="Estimated Amount" >
        </td>
        <!-- tds -->
    </tr>
</tbody>

这样，每当您的油漆和凹痕费用发生变化时，您每个索引项目的估计金额都会自动更新。