Question

在Vue中，我在2d数组输入字段中插入一个值并按行计算它，但是返回的总值仅计算第一行，当我显示时，计算值都相同

我如何计算输入的值，以便该值将对每一行进行计算，而不仅仅是第一个值？

NAME   | VALUE1 | VALUE2 | TOTAL
name1  |   1    |   1    | 2
name2  |   2    |   3    | 2
name3  |        |        | 2

脚本

 data() {
    return {
      form: new Form({
        labStudentScores: [],
      })
    };
  },
 computed: {
    studentTotalScore: function() {
      return this.form.labStudentScores.reduce(
        (acc, item) => acc + parseInt(item.value),
        0
      );
    },
methods: {
 addScore: function() {
      this.form.labStudentScores.push({ value: [] });
    }
}

模板

<button type="button" @click="addScore">score(+)</button>

//classlists is comming from http request
 <tr v-for="(classlist,index) in classlists" :key="'lab'+ classlist.id">
    <td>{{index +1}}</td>
    <td>
        {{classlist.student}}
    </td>
    <td v-for="(labStudentScore,i) in form.labStudentScores" :key="i">
        <input v-model="labStudentScore.value[index]"  />
    </td>

    <td>{{studentTotalScore}}</td>
</tr>

Answer 1

您的计算变量实际上只是一个数字studentTotalScore。由于您希望每行都有一个数字，因此此计算值应该是数组studentTotalScores。每行应该有自己的索引。

this.form.labStudentScores[index].push(value);

在模板中，您也应该参考正确的行进行计算。

{{studentTotalScore[index]}}

当然，您的计算函数还应该只计算相关行的值。

在vue.js中使用reduce计算二维数组

1 个答案: