VueJs : Row element ignore the added binding class-CodePudding

I create a table with dynamically created rows. Every rows has a default style, but I would like added "focus" style dynamically with keys (up and down).

It can be seen in the console, that the correct row got focus class, but it ignore its.

template:

<tbody v-if="items.length" style="font-size: 13px">
   <tr v-for="(item, key) in items"
       
       v-bind:
       @click="$emit('item-selected', item)">

Style, indeed vue components:

<style scoped lang="scss">
.focus {
    @apply .bg-gray-400;
}

.tableStyle {
   ...
   & tbody {
      tr {
         &:nth-child(2n) {
            @apply .bg-white;
         }
         &:hover {
            @apply .bg-gray-400;
         }

      @apply .text-center .bg-gray-200;

      display: table; /* display purpose; th's border */
      width: 100%;
      box-sizing: border-box
   }
   display: block;
   max-height: 450px;
   overflow-y: scroll;
}

I think is maybe style issue, but I have not found any solution for it.

Thanks, if you help me :)

CodePudding user response：

The specificity of your .focus selector there is likely to be weaker than the other styling, so it is overridden by the later .bg-gray-200.

Try moving the focus styling to a &.focus block inside the tr { block, after the other @apply.

It might also just be that you are missing a closing brace for the tr block, and did not intend to apply the overriding style (as suggested by the indentation):

      tr {
         &:nth-child(2n) {
            @apply .bg-white;
         }
         &:hover {
            @apply .bg-gray-400;
         }
      } <-- is this brace missing?