Vue.js：计算平均值并更新字段

Posted 2023-02-22

【中文标题】Vue.js：计算平均值并更新字段

【英文标题】：Vue.js: Calculate average and update field

【发布时间】：2015-05-28 08:19:13

【问题描述】：

我正在尝试计算不等于零的子成绩的平均值，并将绑定输入设置为新的平均值。

子等级有一个调用 calcAverage() 函数的 v-on 指令。在这我认为你应该更新各自的 avgGrade 值。

html：

<div id="container">
    <div class="row" v-repeat="testData">
        <p>Grade avg:
            <!--this should be average of sub grades that aren't 0-->
            <input type="text" v-model="avgGrade" disabled />
            <div v-repeat="vals">Sub grade item:
                <input type="text" v-model="grade" v-on="change:calcAverage" />
            </div>
        </p>
    </div>
</div>

JS：

var data = [
    item: 1,avgGrade: 2,vals: [grade: 2, grade: 2, grade: 2],
    item: 2,avgGrade: 3,vals: [grade: 3, grade: 3, grade: 3],
    item: 3,avgGrade: 4,vals: [grade: 4, grade: 4, grade: 4]
];
var testVue = new Vue(
    el: '#container',
    data: 
        testData: data
    ,
    methods: 
        calcAverage: function (e) 
            //calculate the average of sub grades
            //change Grade avg to show this
        
    
);

小提琴：https://jsfiddle.net/ksumarine/bwrvsmpk/

谢谢！

【参考方案1】：

您可以将重复项传递给您的change 事件回调函数，就像这样：

HTML

<div id="container">
    <div class="row" v-repeat="testData">
        <p>Grade avg:
            <!--this should be average of sub grades that aren't 0-->
            <input type="text" v-model="avgGrade" disabled />
            <div v-repeat="vals" v-with="subItem: $data">Sub grade item:
                <input type="text" v-model="grade" v-on="change:calcAverage(subItem)" />
            </div>
        </p>
    </div>
</div>

JS

var data = [
    item: 1,avgGrade: 2,vals: [grade: 2, grade: 2, grade: 2],
    item: 2,avgGrade: 3,vals: [grade: 3, grade: 3, grade: 3],
    item: 3,avgGrade: 4,vals: [grade: 4, grade: 4, grade: 4]
];

var testVue = new Vue(
    el: '#container',
    data: 
        testData: data
    ,
    methods: 
        calcAverage: function (subItem) 
            var total = 0,
                length = subItem.vals.length;

            for (var i = 0; i < length; i++) 
                total += parseFloat(subItem.vals[i].grade);
            

            subItem.avgGrade = total / length;
        
    
);

假设你的avgGrade是浮动的，我这里用parseFloat，你可以随意改成parseInt。

这是JSFiddle。