I'm using vue js with vuetify and laravel. I have a ponent 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()
}
}
I'm using vue js with vuetify and laravel. I have a ponent 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()
}
}
1 Answer
Reset to default 7I 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./css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr/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() {
// ...
}
}