VueJS Styling with computed property does not get applied

Question

<template>
  <div v-bind:class="divClass">
    <v-card>
       <h3>Test</h3>
    </v-card>
  </div>
</template>

I use a computed property to apply the class:

  computed: {
    divClass() {
      return this.$store.state.lineData.data.length > 0
        ? ".customcol .triggered"
        : ".customcol";
    },
  }

The classes are styled here:

<style scoped>
.customcol {
  width: 100% !important;
  transition: width 0.3s ease;
}
.customcol .triggered {
  width: 75% !important;
}
</style>

I can see that the classes are applied in the console, but element.style { } is just empty and the div does not have a width of 100%. What am I doing wrong?

Answer 1

I believe it should be:

? "customcol triggered"
: "customcol";

No prefix dots.

The dots are used to signify a class within a selector, they aren't part of the class name itself.

You're also going to have problems with this selector:

.customcol .triggered {
  width: 75% !important;
}

This matches .triggered as a descendent of .customcol, whereas you have both classes on the same element. You'll need to remove the space from the selector, .customcol.triggered.