[Vuejs]-Accessing properties of iterated values in Vue.js

by

1👍

I don’t believe there’s a way to pass values into a computed property. Instead, you could change isActive to a method, and then pass in item.

In the li:

v-bind:class="{ active: isActive(item) }"

Then change isActive to a method and operate on the specific item:

methods: {
  isActive (item) {
    return item.nextPath === this.$store.state._breadcrumbPath;
  }
}
👤asemahle

-1👍

you’ll need to do this within your class binding:

<li v-for="item in filteredParentItems"
  v-if="item.action === 'list'"
  v-on:click="getNextPath"
  v-bind:data-next-path="item.nextPath"
  v-bind:data-action="item.action"
  v-bind:class="{ active: item.nextPath === _breadcrumbPath }"
  class="item">
    {{item.name}}
    <i class="fa fa-arrow-right" aria-hidden="true"></i>
</li>

then in your components script:

computed: {

  _breadcrumbPath () {
    this.$store.state._breadcrumbPath
  },
  ...
👤GuyC

Leave a comment