1

私は次のようにリストをループしています:

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

問題は、li を独自のコンポーネントとして設定していないため、計算された関数内で item.nextPath にアクセスできないことです。実際の項目を isActive 関数に渡してそのプロパティを取得する方法はありますか?

4

2 に答える 2

1

計算されたプロパティに値を渡す方法があるとは思いません。isActive代わりに、メソッドに変更してから を渡すことができますitem。

でli：

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

次にisActive、メソッドに変更し、特定のアイテムを操作します。

methods: {
  isActive (item) {
    return item.nextPath === this.$store.state._breadcrumbPath;
  }
}
于 2016-11-28T18:46:17.843 に答える
-1

クラスバインディング内でこれを行う必要があります。

<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
  },
  ...
于 2016-11-28T19:01:54.903 に答える