如何對(duì)v-for循環(huán)生成的輸入框進(jìn)行v-model數(shù)據(jù)綁定

小弟最近在學(xué)習(xí)vue.js, 遇到點(diǎn)問題。如下圖所示，我用v-for循環(huán)生成了三行兩列的輸入框，現(xiàn)在我想對(duì)第一列的輸入框做自動(dòng)求和的操作，第二列不做任何操作，應(yīng)該如何用v-model進(jìn)行數(shù)據(jù)綁定呢？舉個(gè)例子，我在第一列分別輸入1，2，3, 頁面上會(huì)實(shí)時(shí)顯示出求和是6.

圖片描述

這是我寫的測(cè)試代碼，現(xiàn)在無法對(duì)第一列的數(shù)據(jù)進(jìn)行雙向綁定，請(qǐng)大神看看應(yīng)該如何修改

<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
        }
      }
      
      //看網(wǎng)上的帖子自己嘗試寫的代碼,但是不行，請(qǐng)大神指教
      // <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>

小弟基礎(chǔ)不好，請(qǐng)大家看看代碼指教一下如何修改，感謝

回答

編輯回答

兔寶寶

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

inputValues 是數(shù)組
inputValues[0] 這樣
或者 forEach 循環(huán) 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 關(guān)于數(shù)組的操作

2018年1月10日 19:17