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"></td>
<td class="text-md-center"></td>
<td class="text-md-center"></td>
<td class="text-md-center"></td>
<td class="text-md-center"></td>
<td class="text-md-center"></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()
function
changeServicePlanData()
function
changeServicePlanData(id){
if($('#'+id).checked == true){
this.savePlan()
}else{
this.deletePlan()
}
}
Aucun commentaire:
Enregistrer un commentaire