Using Vue version 3.0.5.
I have a component named Cube.vue where I am attempting to dynamically assign a blue or green class to a child element.
The component has been created and imported into a specific page, however, I am facing issues getting the conditional class assignment to work as intended.
<template>
<div :class="$style.cubeInner">
<div class="cube" :class="{ 'cube--blue': isBlue, 'cube--green': isGreen }">
<div v-for="side in cubeside" :class="side.class" :key="side.id"></div>
</div>
</figure>
</template>
This is my export:
export default {
data() {
return {
Cube: 'cube',
isBlue: Boolean,
isGreen: Boolean,
};
}
};
I import this component into another one and render it using
<cube-hover></cube-hover>prop or utilize the data() method to determine whether isBlue should be true or false. I am encountering difficulties targeting the nested <div> element as the class is being added to the parent only. My goal is to add either the class 'cube--blue' or 'cube--green' to specific pages.