As I make my component library in Vue, one specific element I've defined is a custom checkbox. The code for this component looks like this:
<template>
<div class="checkboxcont" :class="{'checkboxcont-selected': isSelected}" @click="clickevent">
<span class="j-checkbox">
<input type="checkbox" />
</span>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
isSelected: false
}
},
methods: {
clickevent(event) {
if(this.isSelected) {
this.isSelected = false;
} else {
this.isSelected = true;
}
}
},
}
</script>
My objective now is to ensure that when I click on the checkbox, it sets the 'isSelected' data property to false and assigns the CSS class 'checkboxcont-selected-last' to the component. Additionally, I want this added class to be removed once I click on another checkbox component. How can I achieve this functionality through event listening? I attempted using vanilla JavaScript to manipulate DOM classes but encountered issues integrating it with Vue.js bindings:
clickevent(event) {
if(this.isSelected) {
this.isSelected = false;
this.$el.classList.add("checkboxcont-selected-last");
} else {
this.isSelected = true;
}
}
I'm unsure how to address this problem effectively. Can you offer any guidance?
For styling, I utilized Less as follows:
<style lang="less" scoped rel="stylesheet/less">
@import '../../mixin/mixin.less';
/* Styling rules */
</style>
<style lang="less" rel="stylesheet/less">
@import '../../mixin/mixin.less';
/* Additional styling rules */
</style>
After trying various approaches involving `this.$el` and native DOM operations, I found limitations while manipulating other components based on their classnames in conjunction with Vue bindings. Is there an alternate method or approach that you'd recommend?