Conditional classes in Vue using objects inside v-for loop

Question

I am using v-for to iterate over an array of objects inside my data. For each object I have in the array, I want a link. Each link should have their own class dependent on the Boolean hide property in their object.

But when I try to pass an object property into the class via :class="{ game.hide: hideGame }", Vue outputs an error: Parsing error: Unexpected Token .

What am I doing wrong?

<template>
  <div class="showcase-container">
    <button :class="{ leftArrow: noGames }">test</button>
    <a
      v-for="game in games"
      :key="game.id"
      :class="{ game.hide: hideGame }"
      href="#"
      >{{ game.name }}</a
    >
    <button>test</button>
  </div>
</template>

<script>
export default {
  noGames: true,
  data() {
    return {
      games: [
        {
          name: "Game 1",
          link: "https://google.com",
          id: 1,
          hide: false,
        },
        {
          name: "Game 2",
          link: "https://youtube.com",
          id: 2,
          hide: true,
        },
      ],
      noGames: true,
    };
  },
  methods: {
    showGame() {
      alert(this.game1);
    },
  },
};
</script>

<style lang="scss">
.leftArrow {
  visibility: hidden;
}
.hideGame {
  display: none;
}
</style>

Boussadjra Brahim · Accepted Answer · 2020-09-19 13:28:04Z

3

You're reversing the key/value in class attribute value, it should be :

:class="{ hideGame: game.hide  }"

generally :

:class="{ someClassName: someVueProperty  }"

if the class name contains - it should be wrapped by '' like :

  :class="{ 'link-hidden': isHidden}"

edited Sep 19, 2020 at 13:28

answered Sep 19, 2020 at 13:16

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MartinDubeNet · Accepted Answer · 2022-02-10 02:58:06Z

0

Minor note:
Your two CSS class names “game.hide” should be written “game hide” without the dot “.”

So Brahim string should look like

:class="{'game hide':hideGame  }"

answered Feb 10, 2022 at 2:58

MartinDubeNet

1375 bronze badges

Collectives™ on Stack Overflow

Conditional classes in Vue using objects inside v-for loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related