antd v-decorator双向绑定问题

Question

我有一个需求是通过数量和单价计算出总价
data里配置了一个对象数组

 orderMainModel: {
          goods: [{
            name:'',
            num:0,
            price:0.0
          }],
        }

下面是我的表单

      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="产品信息" key="1">
          <div>
          <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in orderMainModel.goods" :key="index">
              <a-col :span="5">
                <a-form-item>
                  <a-input placeholder="产品名称"  v-decorator="['goods['+index+'].name',{rules:[{required:true,message:'请输入产品名称'}]}]"></a-input>
                </a-form-item>
              </a-col>
<a-col :span="5">
                <a-form-item>
                  <a-input placeholder="产品数量"  v-decorator="['goods['+index+'].num',{rules:[{required:true,message:'请输入产品数量'}]}]"></a-input>
                </a-form-item>
              </a-col>

               <a-form-item>       
                  <a-input placeholder="单价"
                           v-decorator="['goods['+index+'].price', {rules: [{ required: true, message: '请输入产品单价' }]}]"/>
              </a-form-item>          
              
            </a-row>  
          </div>     
        </a-tab-pane>
      </a-tabs>

我想知道应该如果在数量和单价的输入框内输入值就可以直接计算出总价，现在卡在如何获取我输入到input的实时数据

Answer 1

@input事件 @change事件
这里有v-model绑定值
你可以拆分为 :value、@input