vuejs, how to bind dynamic class within a v-for loop

Question

In Vuejs, I would like to set an "active" class on my nav. The nav is built in a v-for loop like this:

<li v-for="item in arrNav" v-bind:class="{'active' : item.id }">
    <a v-link="{ path: item.id }">{{ item.title}}</a>
</li>

here's the data:

arrNav: [{
    'title': 'Home',
    'id': 'home'
  },
  {
    'title': 'About',
    'id': 'about'
  },
  {
    'title': 'Contact',
    'id': 'contact'
  }]

This is setting an "active" class on every li. I assume this is because item.id is returning true because it's a string. Is there a way to evaluate item.id to its variable name?

user900362 · Accepted Answer · 2016-08-10 23:32:31Z

3

There's a more elegant to do it, as vue-router provides this functionality by default. If you want to give a class to the parent item of the navigation element, you can use v-link-active:

<li v-for="item in arrNav" v-link-active>
    <a v-link="{ path: item.id }">{{ item.title}}</a>
</li>

That will give the li item a v-link-active class. Take a look at this page on the vue-router documentation.

answered Aug 10, 2016 at 23:32

user900362

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

Collectives™ on Stack Overflow

vuejs, how to bind dynamic class within a v-for loop

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related