Vuejs2-从“获取动态值”；“v型”，计算全部并将其显示在“计算”属性中

我的表单由动态表组成，可以添加和删除任意数量的行。每当用户在“费用”字段中输入值时，我都要计算总计。在初始阶段，“总计”值将为0，因为我已将“enteredValue”值初始化为0并返回相同的值。但只要“行[].charges”v-model（charges列）中有更改，“enteredValue”值应更新相同的值。请帮我解决这个问题

这是我的密码：

<template>
<div>
    <b-card>
        <div class="panel-body" id="app">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th style="width: 20px;">No.</th>
                        <th style="width: 330px;">Description</th>
                        <th style="width: 130px;" class="text-right">Charges</th>
                        <th style="width: 130px;"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(row, index) in rows" :key="row.qty">
                        <td>
                            {{ index +1 }}
                        </td>
                        <td>

                        <select class="form-control" v-model="row.billChgDesc" v-validate="'required'" :name="'billChgDesc' + index" data-vv-as="Description">
                            <option v-for="option in billChgDescOpt" v-bind:value="option.value" 
                                :key="option.value"> {{ option.text }} 
                            </option>
                        </select>
                        <span v-show=" errors.has('billChgDesc' + index)" class="is-danger">{{  errors.first('billChgDesc' + index) }}</span>
                        </td>

                                <td> 
                                  <input class="form-control text-right" type="text" v-model="row.charges"  data-type="currency" v-validate="'required'" :name="'charges' + index" data-vv-as="Charges" >
                                     <span v-show=" errors.has('charges' + index)" class="is-danger">{{  errors.first('charges' + index) }}</span>

                                <td>
                                    <button class="btn btn-primary btn-sm" @click="addRow(index)"><i class="fa fa-plus"></i></button>
                                    <button class="btn btn-danger btn-sm" @click="removeRow(index)"><i class="fa fa-minus"></i></button>
                                </td>
                            </tr>
                </tbody>
                <tfoot>
                     <tr>
                        <td colspan="2" class="text-right"><strong>GRANDTOTAL</strong></td>
                        <td colspan="1" class="text-right"><strong>{{ grandtotal }}</strong></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>

        </div>
    </b-card>
</div>
</template>

<script>
import Vue from 'vue'
import accounting from 'accounting'
import VeeValidate from 'vee-validate'

export default {

filters:{
moneyFormat: function (val){
     if (val > 0) {
            return accounting.formatMoney(val, " ₹ ", 2, ",", ".");
        }
}
}
   data: function () {
    return {
        billChgDescOpt: [
            { value: '', text: 'Select' },
            { value: 'M', text: 'Maintenance Fee'},
            { value: 'W', text: 'Water Charges'},
            { value: 'P', text: 'Penalty Fee'},
            ],
        rows: [
            {qty: 5, billChgDesc: '', charges: 55.20, tax: 10},
            {qty: 19, billChgDesc: '', charges: 1255.20, tax: 20},
        ],
        enteredValue:0
    }

  },
    computed: {
        row.charges:{
           get: function () {
              return this.enteredValue
          }
          set: function (newValue) {
             this.enteredValue = 0;
             let inputValue = parseInt(newValue);
             this.enteredValue = enteredValue+inputValue
             this.enteredValue = inputValue
          }
      },
       grandtotal(){
            return this.enteredValue;
         }
    },
    methods: {
        addRow: function (index) {
            try {
                this.rows.splice(index + 1, 0, {});
            } catch(e)
            {
                console.log(e);
            }
        },
        removeRow: function (index) {
            this.rows.splice(index, 1);
        }
    }
}
</script>
<style lang="scss" scoped>
.is-danger{
  color:  RED;
}
</style>

不
描述
收费
{{index+1}}
{{option.text}
{{errors.first（'billChgDesc'+index）}
{{errors.first（'charges'+index）}
GRANDTOTAL
{{grandtotal}
从“Vue”导入Vue
从“会计”导入会计
从“vee validate”导入vee validate
导出默认值{
过滤器：{
moneyFormat:函数（val）{
如果（val>0）{
返回会计。格式化货币（val，“₹ ", 2, ",", ".");
}
}
}
数据：函数（）{
返回{
billChgDescOpt：[
{值：''，文本：'选择'}，
{值：'M'，文本：'维护费'}，
{值：“W”，文本：“水费”}，
{值：'P'，文本：'罚款'}，
],
行：[
{数量：5，billChgDesc:''，费用：55.20，税款：10}，
{数量：19，billChgDesc:''，费用：1255.20，税款：20}，
],
输入值：0
}
},
计算：{
第4行费用：{
get:function（）{
返回此.enteredValue
}
set：函数（newValue）{
this.enteredValue=0；
让inputValue=parseInt（newValue）；
this.enteredValue=enteredValue+inputValue
this.enteredValue=inputValue
}
},
总计（）{
返回此.enteredValue；
}
},
方法：{
addRow:函数（索引）{
试一试{
this.rows.splice（索引+1,0，{}）；
}捕获（e）
{
控制台日志（e）；
}
},
removeRow:函数（索引）{
此.rows.splice（索引，1）；
}
}
}
.有危险吗{
颜色：红色；
}

---

提前感谢。

我不太确定您试图对

行执行什么操作。charges

computed属性-它应该返回函数，但您返回的是对象？这甚至可以编译吗

我建议您更改计算属性，如下所示：

computed: {

   grandtotal() {
        let tmp = 0;
        this.rows.forEach((row) => {
            tmp += row.charges;
        });

        // if you want enteredValue to always be the total charges, uncomment the following
        // this.enteredValue = tmp;
        return tmp;
     }
},

addRow: function (index) {
        try {
            this.rows.splice(index + 1, 0, {qty: 0, billChgDesc: '', charges: 0, tax: 0});
        } catch(e)
        {
            console.log(e);
        }
    },

另外，我认为您的

addRow

方法有问题。如果您添加一个空对象，您的

v-model

s可能会失败，因为没有定义例如

charges

。您可以尝试以下操作：

computed: {

   grandtotal() {
        let tmp = 0;
        this.rows.forEach((row) => {
            tmp += row.charges;
        });

        // if you want enteredValue to always be the total charges, uncomment the following
        // this.enteredValue = tmp;
        return tmp;
     }
},

addRow: function (index) {
        try {
            this.rows.splice(index + 1, 0, {qty: 0, billChgDesc: '', charges: 0, tax: 0});
        } catch(e)
        {
            console.log(e);
        }
    },

---

希望这有帮助。

此行“this.rows.forEach（row）{}”中出现错误。此行抛出一个错误，如“；”“您能将我的答案标记为正确答案吗：）？只需单击答案旁边的“检查”图标。