<b-card-text class="mb-0">
Success
</b-card-text>
<b-form-checkbox
checked="true"
class="custom-control-success"
name="check-button"
switch
@change="changeStatus"
/>
changeStatus() {
this.$swal({
icon: "question",
text: "Change Status?",
buttonsStyling: false,
showCancelButton: true,
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
// handle code
}
});
},
I am making checkbox in vuejs. When I click on the status to switch the status, it shows a swal saying Change Status. The problem I have is: When I just press status, a message swal appears, the status has been changed. I want if I press Ok the status will change, but if I press cancel it will stay the same, Thanks
your switch is not reactive value
checked default is true right, when its change it will be false
you just need make it reactive
example:
data():{ arr:[{name: "test", status: true}, {name: "test2", status: false}]}
make it reactive
<table id="example-1">
<tr v-for="item in arr" :key="item.name">
<td>{{ item.name }}</td>
<td>
<b-form-checkbox
checked="item.status" <--- this make it reactive
class="custom-control-success"
name="check-button"
switch
@change="changeStatus"
/>
</td>
</tr>
</table>