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

我试图计算不等于零的子分数的平均值，并将绑定输入设置为新的平均值

子等级有一个v-on指令，该指令调用calAverage（）函数。在这里，我认为您应该更新相应的avgGrade值

HTML:

小提琴：

---

谢谢

您可以将重复项传递到

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;
        }
    }
});

var数据=[
{项目：1，平均等级：2，VAL:[{grade:2}，{grade:2}，{grade:2}]}，
{项目：2，平均等级：3，VAL:[{grade:3}，{grade:3}，{grade:3}]}，
{项目：3，平均等级：4，VAL:[{等级：4}，{等级：4}，{等级：4}]}
];
var testVue=新的Vue({
el:'集装箱'，
数据：{
testData：数据
},
方法：{
平均值：功能（子项）{
var总计=0，
长度=子项.vals.length；
对于（变量i=0；i

假设您的avgGrade是float，我在这里使用

parseFloat

，您可以根据需要将其更改为

parseInt

这是一个例子

<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>

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;
        }
    }
});