call to two functions in v-checkbox onchange event in vue js

Question

I'm using vue js with vuetify and laravel. I have a component with a dynamic datatable which gets data from database using axios. Also there's v-checkboxes in that datatable. So everything is working as i expect. But now I want to call to two functions onchange event in v-checkbox. For example when user click the checkbox (checked) I want to call to a save function and when user uncheck the checkbox I want to call to a delete function. I tried to do it with the id of the v-checkbox and check if that checkbox is checked then call to save function else call to delete function. And then when user checked the checkbox save function get called but when user uncheck the checkbox both functions get called. That's where I'm stuck at. How can I archieve this?

datatable

<v-data-table :headers="customer_headers" :items="customers" :search="customer_search" item-key="CustomerCode" ref="customer_table">
   <template slot="items" slot-scope="props">
     <tr :id="'customer_tr_'+props.item.CustomerCode">
       <td class="text-md-center">{{ props.item.CustomerCode }}</td>
       <td class="text-md-center">{{ props.item.CustomerName }}</td>
       <td class="text-md-center">{{ props.item.NO_OF_DISPENSERS }}</td>
       <td class="text-md-center">{{ props.item.next_service_date }}</td>
       <td class="text-md-center">{{ props.item.STATUS }}</td>
       <td class="text-md-center">{{ props.item.Workerstatus }}</td>
       <td class="text-md-center">
         <v-checkbox
                     :key="props.item.CustomerCode"
                     :ref="'customer_checkbox_ref' + props.item.CustomerCode"
                     :id="'customer_checkbox_'+props.item.CustomerCode"
                     @change="loadCustomerDispensers(props.item.CustomerCode,props.item.STATUS);changeServicePlanData()"
                     ></v-checkbox>
       </td>
     </tr>
  </template>
</v-data-table>

I 'm trying this in changeServicePlanData() functionchangeServicePlanData()

function changeServicePlanData(id) {
   if ($('#' + id).checked == true) {
      this.savePlan()
   } else {
      this.deletePlan()
   }
}

Solution

I would say you don't need jQuery for this. There are several approaches to achieving this on v-checkbox, one being the use of Checkboxes selected values as Array.

Consider the following example:

new Vue({
  el: '#app',

  data() {
    return {
      items: [{
          label: 'Item #1',
          value: 1
        },
        {
          label: 'Item #2',
          value: 2
        },
        {
          label: 'Item #3',
          value: 3
        }
      ],

      selected: [2] // Preselects Item #2
    }
  },

  methods: {
    check(val) {
      let action = '';

      if (this.selected.includes(val)) {
        action = 'Saving';
      } 
      else {
        action = 'Deleting';
      }

      alert(`${action} plan #${val}`);
    }
  }
});

.v-input {
  margin-top: 0 !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container fluid>
      <v-checkbox v-model="selected" 
                  v-for="item in items" 
                  :key="item.value"
                  :label="item.label" 
                  :value="item.value"
                  @change="check(item.value)"></v-checkbox>
    </v-container>
  </v-app>
</div>

So, in your case, I would do something like so:

<v-data-table 
  :headers="customer_headers" 
  :items="customers" 
  :search="customer_search" 
  item-key="CustomerCode" 
  ref="customer_table">

  <template slot="items" slot-scope="{ item }">
    <tr>
      <!-- the other TDs here -->

      <td class="text-md-center">

        <v-checkbox
          v-model="selectedCustomerCodes"
          v-bind:value="item.CustomerCode"
          label="Service plan data"
          @change="loadCustomerDispensers(item.CustomerCode, item.STATUS)">
        </v-checkbox>

      </td>
    </tr>
  </template>

</v-data-table>

data() {
  return {
    selectedCustomerCodes: []
  }
},

methods: {
  loadCustomerDispensers(customerCode, status) {
    // Your business logic

    this.changeServicePlanData(customerCode);
  },

  changeServicePlanData(code) {
    if (this.selectedCustomerCodes.includes(code)) {
      this.savePlan();
    } 
    else {
      this.deletePlan();
    }
  },

  savePlan() {
    // ...
  },
  deletePlan() {
    // ...
  }
}

Comments

[Alopwer]

Hi, what if the only way to get the tableData is by passing it through props to the table component, how in that case you would use the v-model