vue 获取el-input 绑定的value值

Question

我有三个el-input，最后一个会根据前两个的值来自动计算。但最后一个可以手动填，也可以不填。于是我在最后一个el-input上 绑定了 :value。 提交时使用 v-model值。
问题是，我填写了前两个输入框之后，第三个输入框的值自动计算了，再我没有手动输入的情况下，v-model 是取不到值得。
大佬求解

<template>
<el-input type="number" v-model="principal"></el-input>

<el-input type="number" v-model="investment_cycle"></el-input>

<el-input v-model="settlement.income" type="number"  :value="principal*investment_cycle"></el-input>
</template>

<script>
data() {
    return {
        income: '', 
        principal: '',
        investment_cycle: '',
      }
    };
  },
</script>

Answer 1

可以使用监听:

data() {
    return {
           settlement:{
                income: '', 
                principal: '',
                investment_cycle: '',
           }
      }
    };
  },
  watch:{
     'settlement':{
         handler(val){
         //判断当第一个和第二个input值改变时才触发
             if(val.principal && val.investment_cycle){
                //当第一个和第二个input值改变时计算
                this.$set(val,'income',val.principal * val.investment_cycle)
             }
         },
         deep:true
     }
  }

然后三个input的绑定分别如下:

 <el-input type="number" v-model="settlement.principal"></el-input>

<el-input type="number" v-model="settlement.investment_cycle"></el-input>

<el-input v-model="settlement.income" type="number"></el-input>  

Answer 2

两个思路，一，不用v-model，通过value展示，input输入，获取自然也通过value，v-model其实就是上边两个的语法糖，所以可以不用。二，保留v-model，不用value，然后用computed计算

Answer 3

尝试了一下，仅用value 或 v-model 是没法手动改变值得。
我换了一种思路，给前两个加change 事件，第三个绑定 v-model，取消绑定value。
只要前两个有输入就计算赋值给第三个v-model,这样手动修改也不会受影响。但感觉这种方法有些拙略，不知道还有没有更好的方法。