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，因为我没有将li设置为自己的组件。有没有办法将实际项目传递给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
  },
  ...

在Vue.js

2 个答案: