v-model and passing a parameter to a rest patch api call

Question

Very new to Vue2, so far so good but I hit a little snag and front end is not my forte. The table(vue-tables-2) displays correctly what's in the database. I am passing an id in a function to determine what particular row to update but I also want to update the value of the checkbox in the database whenever I press it. How can I achieve that? Many thanks.

<v-client-table :data="tableData" :columns="columns" :options="options" >

<input type="checkbox" v-model="props.row.powerOff" @change="powerOff(props.row.id, props.row.powerOff)">

</v-client-table>

export default {
  data() {
    return {
      columns: ['id', 'name', 'location.address', 'status', 'payment', 'powerOff'],
      tableData: [] 
    }
  },
 created() {
    HTTP.get('test').then( response => {this.tableData = response.data;})
    .catch( error => {});
},
 methods: {
powerOff(id, currentPowerOff) {
  var testURL = 'test/' + id

  HTTP.patch(testURL, {id, currentPowerOff})//
  .then( response => {})
  .catch( error => {console.log(error); });
 }
}

}

Answer 1

It seems that changing from v-click:on to @change fixed my issue. Reading a little bit more about it, click event is run before v-model has updated the value, while @change does it afterwards. Thank you !