Style an item in a list based on its property in Vuejs

Question

I am very new to Vuejs, so please pardon me if this is something very common. But I am trying to style an item based on the condition of whether the name of the item is equal to another object.

<template>
  <div id="subMenuWrapper">
    <ul id="subMenuList">
      <li v-for="menu in SubMenuItems" v-bind:class="{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle}">{{menu.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'subMenuWrapper',
  data() {
    return {
      SubMenuItems: [
        {
          name: 'IN THEATERS',
        },
        {
          name: 'COMING SOON',
        },
      ],
      activeSubMenuItem: 'IN THEATERS',
    }
  },
}
</script>

<style>
.activeSubMenuItemStyle {
  font-weight: bold;
  color: #e4bb23;
  padding: 8px 0;
}

.subMenuItemStyle {
  font-weight: bold;
  color: #e4bb23;
  padding: 8px 0;
}
</style>

This is giving me an error:

Vue template syntax error:

invalid expression: v-bind:class="{activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle}"

How can I style an item in a list based on its properties?

Update:

Tried this way too:

<li v-for="menu in SubMenuItems" v-bind:class="[activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle]">{{menu.name}}</li>

and added the activeSubMenuItemStyle and subMenuItemStyle into the data with style properties.

This is not giving any errors, but the item has no styles

You have no style because your CSS is not being read, it can be something related to your build process. Remove the CSS from the template file and make it global. — Jonatas Walker
– Jonatas Walker, Commented Feb 20, 2017 at 12:24

tony19 · Accepted Answer · 2022-07-15 02:41:42Z

3

If you are using a ternary expression, you need to use different brackets:

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

Should work after this correction.

Try to refer to docs: https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax . If it won't work - let me know, I'll try to edit answer to help.

As pet Mat comment, <li v-for="menu in SubMenuItems" v-bind:class="[activeSubMenuItem === menu.name? 'activeSubMenuItemStyle':'subMenuItemStyle']">{{menu.name}}</li>

edited Jul 15, 2022 at 2:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 20, 2017 at 8:14

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

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

3 Comments

Kakar Over a year ago

Yes, I tried that way too

<li v-for="menu in SubMenuItems" v-bind:class="[activeSubMenuItem === menu.name? activeSubMenuItemStyle:subMenuItemStyle]">{{menu.name}}</li>

. Its not giving any errors, but its not having any styles.

Mat J Over a year ago

activeSubMenuItemStyle, if this is the name of the css class, you should put that in quotes like a string. Anything inside the quotes of v-bind:class should be a valid javascript expression, in your case, they might be interpreted as undeclared variables. try v-bind:class="[activeSubMenuItem === menu.name? 'activeSubMenuItemStyle':'subMenuItemStyle']"

Marek Urbanowicz Over a year ago

Kakar - please put jsfiddle together with your code to let us help you

Collectives™ on Stack Overflow

Style an item in a list based on its property in Vuejs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related