I've been struggling to create a custom dropdown for my application. I need to implement a function that adds a class called is-active to a div element. So, what I have done is created a simple div with an onclick function as shown below:
<div :class="is_active" @click="open">
In the setup method, I defined is_active and open like this:
setup() {
let is_active = ref('no-active');
function open() {
is_active.value = 'is-active';
}
return {
is_active,
open
}
}
The concept is that when a user clicks on the function, it sets is-active to open it and no-active to close it. I know how to achieve this with boolean values, but I'm unsure about handling strings.
One way I could approach this is:
if(is_active === 'is-active) {
is_active.value = 'no-active'
} elseif(is_active === 'no-active') {
is_active.value = 'is-active
}
However, I believe there must be a better solution out there.