Доступ к свойствам итеративных значений в Vue.js

Question

Я перекручивание через список как так:

<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> 

Для того, чтобы сказать, если элемент активен, я бегу IsActive, вычисленная функция сказать, если путь равно пути крошек у меня в Vuex магазине:

computed: { 
    isActive() { 
     return this.nextPath === this.$store.state._breadcrumbPath; 
    } 
    } 

вопрос в том, у меня нет доступа к item.nextPath внутри вычисленной функции, потому что я не имею Ли установить как свои собственные компонент. Есть ли способ передать фактический элемент в функцию isActive, чтобы захватить его свойство?

Answer 1

Я не верю, что есть способ передать значения в вычисленное свойство. Вместо этого вы можете изменить метод isActive на метод, а затем перейдите в item.

В li:

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

Затем измените isActive к способу и работать на конкретный пункт:

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

Answer 2

вам нужно сделать это в вашем классе связывания:

<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> 

затем в вашем скрипте:

computed: { 

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