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

问题是我无法访问计算函数中的 item.nextPath，因为我没有将 li 设置为自己的组件。有没有办法将实际项目传递给 isActive 函数以获取其属性？

4

2 回答 2

1

我不相信有办法将值传递给计算属性。相反，您可以更改isActive为方法，然后传入item.

在li：

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

然后换isActive一个方法，对具体的item进行操作：

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