Vue -V -- 3.0.5.

I have a component Cube.vue in which I'm trying to set a blue or green class to a child element dynamically.

I've created the component and have it imported into a specific page but I can't get the or to work correctly.

<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>

And here is my export

export default {

  data() {

    return {

      Cube: 'cube',

      isBlue: Boolean,

      isGreen: Boolean,

    };

  }

};

I import into another component and render it via <cube-hover></cube-hover>. My question is do I need to set a prop or a data() for isBlue to be true or false? I can't seem to target the child since the entire component is being imported.

Basically, I can't target that nested <div>, it just adds the class to the parent. And I want to add 'cube--blue' or 'cube--green' to specific pages.

Put the boolean into a data field, and then the condition check into a computed function.

...updated to add context

export default {

    data: () => {

        ...

        isBlue: Boolean,

        isGreen: Boolean,

    },

    computed: 

        isBlue() {

            if (is it blue?) return true;

            return false;

        },

        isGreen() {

            if (is it green?) return true;

            return false;

        }

}



<template>

    ...

    <div class="cube" :class="{ isBlue ? 'cube--blue' : 'cube--green': isGreen }">

    <!-- I think this is where you went wrong: "'cube--blue': isBlue ? 'cube--green': isGreen" see note -->

</template>

note

You have a "?" separating your classes which should either be a comma, or you are trying to do a ternary operation. Comma separation could possibly apply both at once and I suspect you don't want that. Or if you are trying to do conditional class assignment:

Fix your ternary syntax:

`condition ? value if true : value if false`

you are missing the
: value if false portion

What you probably want is:

`:class="isBlue ? 'cube--blue' : 'cube--green'"

Lastly

Now that I've written this out I sort of feel like I should recommend a different approach. Assuming that this cube is either green OR blue, but never both at the same time, you might want to combine the logic into a single step. Perhaps you want to use a conditional inside of a getColor function? This is particularly smart if you will ever have more than two colors. Then the fn just returns a color and you can interpolate that into your class name like:

<div :class="`cube--${color}`"></i>

I can't understand what do you mean by 'or'.

By looking at your data just type:

<div class="cube" :class="{ 'cube--blue': isBlue, 'cube--green': isGreen }">

Update:
Kraken meant to change you approach to:

<div class="cube" :class="`cube--${getColor}`">

and in your data just type:

data() {

  return {

    color: 'blue',

  };

},

computed: {

  getColor() {

    return this.color;

  },

},

With this approach you prepare yourself for maybe more colors in the future. By just updating this.color.