vue中两个input框输入值，自动计算总和到另一个Input框，怎么实现

Question

在vue中怎么实现在第一个input框中自动计算出后面两个input框的总和
<el-form-item label="实收总金额">

             <el-input placeholder="实收总金额"  v-model="form.sum"></el-input>
           </el-form-item>
           <el-input placeholder="实收金额1" v-model="form.add"></el-input>
           <el-input placeholder="实收金额2" v-model="form.add"></el-input>
           

Answer 1

computed:{
    sum(){
        return parseFloat(this.form.add1) + parseFloat(this.form.add2) 
    }
}
v-model = 'sum'

发送数据的时候把sum加上去

r1

           <el-form-item label="实收总金额">
             <el-input placeholder="实收总金额"  v-model="form.sum"></el-input>
           </el-form-item>
    <el-form-item label="活动性质">
      <el-checkbox-group v-model="form.type"
                         :max="5">
        <el-checkbox v-for="(item,index) in arr"
                     :label="item.name"
                     :key="item.id"
                     name="type"
                     @change="fun(index)">
          <div class="displayInput"
               v-if="item.change">{{item.name}}
            <span class="wrap">
              <el-input placeholder="应收金额" v-model="form.add1"></el-input>
              <el-input placeholder="实收金额" v-model="form.add2"></el-input>
            </span>
          </div>
        </el-checkbox>
      </el-checkbox-group>
      // js data里 把form放到arr里面 
      arr：[{name:'s',form:{add1:null,add2:null}}]
      computed:{
        sum(){
            return this.arr..map(v => parseFloat(v.form.add1) + parseFloat(v.form.add2)).reduce((a, b) => a + b)
        }
    }
    // 发送数据就要你自己组织了