Question

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

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

<button @click="addFind">add</button>
<tr v-for="(classlist,index) in classlists" :key="'lab'+ classlist.id">
    <td>{{index +1}}</td>
    <td>{{classlist.student}}</td>
    <td v-for="(lab, i) in labs">
        <input v-model="lab.value[index]" />
    </td>
</tr>

    labs: [],
    classlists: [
      {  "student": "S1","id": 1 },
      {  "student": "S2","id": 2 },
      {  "student": "S3","id": 3 },
      {  "student": "S3","id": 4 },

    ],
  },
  methods: {
    addFind: function () {
      this.labs.push({ value: [] });
    }
  },
    computed: {
    studentTotalScores: function() {
      return this.labStudentScores.reduce(
        (acc, item) => acc + parseInt(item.value),
        0
      );
    }
    }

我需要什么：

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

但要输出：jsfiddle

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

Answer 1

计算属性只能有一个值，您不能“按行”计算。

您可以做的是将值设为一个数组，每行一个条目。

您正在使用的数据结构有些麻烦，因为数组是相对于表进行转置的。仍然可以通过一些战斗来完成。

首先，在模板中，将适当的class ForecastDays extends Component { constructor() { super(); this.state = { location:data.location.name, forecastdays: data.forecast.forecastday }; } render() { const {forecastdays} = this.state; return ( <div> <h1>City :- {this.state.location}</h1> { forecastdays && forecastdays.map(o => <WeatherForecast day={o.day} date={o.date} />) } </div> ); } }添加到行的末尾：

<td>

那么<tr v-for="(classlist, index) in classlists" :key="'lab' + classlist.id"> ... other tds not shown ... <td> {{ studentTotalScores[index] }} </td> </tr>将是：

studentTotalScores

我在studentTotalScores: function() { return this.classlists.map((c, index) => { return this.labs.reduce((acc, item) => { const value = parseInt(item.value[index], 10) || 0 return acc + value }, 0) }) }上添加了10的基数以确保解析一致，并为parseInt添加了一个基数，以便将|| 0视为NaN

VUE：使用多个输入来计算二维数组

1 个答案: