CODEWITHSUNDEEP
vue.js
dev_el
dev_el

Reputation: 2947

Why does my class not show in vue but my conditional class does?

I want to show two classes in my button. One that is conditional on a Boolean data value like "hideLeftArrow" and another class that shows up as the default like arrowBtn. The conditional class shows but the default class doesn't. What is wrong with my syntax in the following:

:class="[{ hideArrow: hideLeftArrow }, arrowBtn]"

My full code for reference

<template>
  <div class="showcase-container">
    <button
      @click="showRightArrow"
      :class="[{ hideArrow: hideLeftArrow }, arrowBtn]"
    >
      <img alt="left arrow" src="../assets/leftArrow.svg" class="arrow" />
    </button>
    <a
      v-for="game in games"
      :key="game.id"
      :class="{ hideGame: game.hide }"
      :href="game.link"
      target="_blank"
      >{{ game.name }}</a
    >
    <button
      @click="showLeftArrow"
      :class="[{ hideArrow: hideRightArrow }, arrowBtn]"
    >
      <img alt="right arrow" src="../assets/rightArrow.svg" class="arrow" />
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      games: [
        {
          name: "Tryangle",
          link: "https://google.com",
          id: 1,
          hide: false,
        },
        {
          name: "BagRPG",
          link: "https://youtube.com",
          id: 2,
          hide: true,
        },
      ],
      hideLeftArrow: true,
      hideRightArrow: false,
    };
  },
  methods: {
    showLeftArrow() {
      this.hideLeftArrow = !this.hideLeftArrow;
      this.hideRightArrow = !this.hideRightArrow;
      this.games[0].hide = true;
      this.games[1].hide = false;
    },
    showRightArrow() {
      this.hideLeftArrow = !this.hideLeftArrow;
      this.hideRightArrow = !this.hideRightArrow;
      this.games[0].hide = false;
      this.games[1].hide = true;
    },
  },
};
</script>

<style lang="scss">
@import "../styles.scss";
.showcase-container {
  .hideArrow {
    visibility: hidden;
  }
  .arrowBtn {
    background: none;
    border: 0;
  }
  .hideGame {
    display: none;
  }
}
</style>

Upvotes: 0

Views: 137

Answers (1)

skirtle
skirtle

Reputation: 29092

I think you're aiming for this, with quotes around arrowBtn:

:class="[{ hideArrow: hideLeftArrow }, 'arrowBtn']"

Otherwise arrowBtn will be treated as a property name and not a string.. That said, I'd probably do it this way instead:

class="arrowBtn"
:class="{ hideArrow: hideLeftArrow }"

class allows you to have both a static and a bound version on the same element.

Upvotes: 2

Related Questions