I have been trying to implement toggle buttons from the argon template and came across an issue. Here is the code snippet:
<template>
<div class="option">
<div>Show value
<label class="custom-toggle">
<input type="checkbox" @click="handleClick($event)">
<span class="custom-toggle-slider rounded-circle"></span>
</label>
<div v-if="viewCheck">
<div>Name </div>
<div>Surname</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Options',
data: function() {
return {
viewCheck:false
}
},
handleClick: function(event) {
console.log(event)
this.viewCheck = true
}
}
</script>
However, upon clicking on the toggle button, I encountered the following error message:
TypeError: _vm.handleClick is not a function
at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-6f2958af","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/views/Option.vue
(app.js:7731), :22:34)
at invokeWithErrorHandling (vue.esm.js?efeb:1863)
at HTMLInputElement.invoker (vue.esm.js?efeb:2188)
at HTMLInputElement.original._wrapper (vue.esm.js?efeb:7559)