javascript - table custom template in elementUI changes the value of v-model in the change event in the component

Question

<el-table-column prop="volume" label="成交数量" width="120">
           <template scope="scope">
                     <el-input v-model="scope.row.volume" placeholder='请输入' type="number" v-on:change="verificationRule"></el-input>
           </template>
  </el-table-column>

methods: {
          verificationRule(value){
            console.log(value);
          },
         }

When the value of the input value changes, how can the change event cause the corresponding scope.row.volume to change? Can anyone please give me some advice?

Answer 1

You can achieve two-way binding with v-model. Why do you need to use the change event?

Answer 2

v-modelAfter binding, changes in the input area will directly change the value of scope.row.volume. Similarly, changes in the value of scope.row.volume will also be reflected in the display of the input area, so it is No need to manually write change events