Блог

Я хочу показать два класса в моем button . Тот, который зависит от Boolean значения данных like "hideLeftArrow" , и другой класс, который отображается как значение по умолчанию like arrowBtn . Условный класс отображается, а класс по умолчанию — нет. Что не так с моим синтаксисом в следующем:

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

Мой полный код для справки

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

Я думаю, вы стремитесь к этому, с кавычками вокруг arrowBtn :

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

В противном arrowBtn случае будет обрабатываться как имя свойства, а не как строка..
Тем не менее, я бы, вероятно, сделал это таким образом:

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

class позволяет вам иметь как статическую, так и связанную версию для одного и того же элемента.