如何对v-for循环生成的输入框进行v-model数据绑定

Question

小弟最近在学习vue.js, 遇到点问题。如下图所示，我用v-for循环生成了三行两列的输入框，现在我想对第一列的输入框做自动求和的操作，第二列不做任何操作，应该如何用v-model进行数据绑定呢？举个例子，我在第一列分别输入1，2，3, 页面上会实时显示出求和是6.

这是我写的测试代码，现在无法对第一列的数据进行双向绑定，请大神看看应该如何修改

<template>
  <div id="app">
    <form action="" :model="inputValues" >
      <div v-for="item in inputValues">
        <input type="text" v-model="item.percentage" placeholder="percentage">
        <input type="text" v-model="item.group" placeholder="group">
      </div>
    </form>
    <span>{{sumValue}}</span>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          inputValues: [
            {
              percentage:'',
              group:''
            },
            {
              percentage:'',
              group:''
            },
            {
              percentage:'',
              group:''
            }
          ]
        }
      },
      computed: {
        sumValue() {
          const number1 = Number.isNaN(parseFloat(this.inputValues.percentage))
            ? 0 : this.inputValues.percentage;
          const number2 = Number.isNaN(parseFloat(this.inputValues.percentage))
            ? 0 : this.inputValues.percentage;
          const number3 = Number.isNaN(parseFloat(this.inputValues.percentage))
            ? 0 : this.inputValues.percentage;
          return number1 + number2 + number3
        }
      }
      
      //看网上的帖子自己尝试写的代码,但是不行，请大神指教
      // <div v-for="(item,index) in inputValues">
      // <input type="text" v-model="item[index].percentage" placeholder="percentage">
      // <input type="text" v-model="item[index].group" placeholder="group">
      // </div>
      // ....
      // computed:{
      //   sumValue() {
      //     var sum = 0;
      //     this.inputValues.foreach((item)=>{
      //       sum +=  Number.isNaN(parseFloat(this.item[index].percentage))
      //              ? 0 : this.item[index].percentage;
      //     })
      //     return sum;
      //   }
      // }
    }
</script>

小弟基础不好，请大家看看代码指教一下如何修改，感谢

Answer 1

const number3 = Number.isNaN(parseFloat(this.inputValues[2].percentage))
            ? 0 : this.inputValues[2].percentage;
           

inputValues 是数组
inputValues[0] 这样
或者 forEach 循环 reduce
这样

sumValue() {
          var sum = 0;
          this.inputValues.foreach((item)=>{
            sum +=  Number.isNaN(parseFloat(item.percentage))
                    ? 0 : parseFloat(item.percentage);
           })
           return sum;
   }

return  this.inputValues.reduce((total,value) => {
    return Number.isNaN(parseFloat(value.percentage)) ? 
    total : 
    total + parseFloat(value.percentage)
},0)

还是看一看 mdn 关于数组的操作

Answer 2

"request_body": {

"personCode": "人机校验码",
"profileEmail": "邮箱",
"password": "密码"

}

<tr v-for="(value,key) in request_body">

<td v-text="key">-</td>
<td v-text="value">-</td>
<td><input v-model="request_body[key]"/></td>

</tr>