Currently, I am iterating over a list as shown below:
<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: isActive }"
class="item">
{{item.name}}
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</li>
To determine if an item is active, I utilize the `isActive` computed function to compare the path with the breadcrumb path stored in Vuex:
computed: {
isActive () {
return this.nextPath === this.$store.state._breadcrumbPath;
}
}
A challenge arises because I do not have access to `item.nextPath` within the computed function since the `li` element is not set up as its own component. Is there a way to pass the actual item into the `isActive` function to retrieve its property?