I'm utilizing a v-bind:class binding on a component in order to toggle a css class based on the truthiness of a boolean within my Vue.js component.
When I specify this in my template:
<aside v-bind:class="{'--opened': sidebarVisible}" class="sidebar" id="sidebar">
In the script section of my component:
<script>
import { EventBus } from "@/event-bus.ts";
export default {
data(){
return {
sidebarVisible: false
}
}
//Removed for brevity
};
</script>
My expectation is that Vue.js will update the class attribute to class="sidebar--opened", however, it actually renders as class="sidebar --opened" with an empty space. How can I work around this issue?