Question

我有一个VueJS对象，其数据如下所示：

phases: [
  { id: 1, ... },
  { id: 2, ... },
  { id: 3, ... },
],
roles: [
  { phaseId: 1, title: "Account Manager" },
  { phaseId: 1, title: "Creative Director" },
  { phaseId: 2, title: "Account Manager" },
  { phaseId: 2, title: "Creative Director" },
]

我的v-for循环如下所示：

    <article v-for="phase in phases" class="phase">

        ... Other content ...

        <div v-for="role in roles | filterBy phase.id in 'phaseId' ">
            <p>${role.title}</p>
        </div>
    </article>

我正在尝试过滤角色数组，以仅显示ID给出的“父”阶段的角色。由于roles for循环将多次运行，因此每次只显示相应的角色。

有没有办法实现这个目标？

Answer 1

+1 @gurghet，过滤器已被弃用。

使用protractor --seleniumAddress='http://localhost:4444/wd/hub' conf.js

method

模板：

data: {
  phases: [
    { id: 1, ... },
    { id: 2, ... },
    { id: 3, ... },
  ],
  roles: [
    { phaseId: 1, title: "Account Manager" },
    { phaseId: 1, title: "Creative Director" },
    { phaseId: 2, title: "Account Manager" },
    { phaseId: 2, title: "Creative Director" },
  ]
},
methods: {
  filtered(id){
    return this.roles.filter(rol => rol.phaseId === id)
  }
}

Exmaple

Answer 2

一个人可以使用调用实际过滤器的mixin

1。首先，我们需要全局注册一个过滤器

Vue.filter('normalizetext', function (value) {
  if (!value) return '';
  value = value.toString();
  value = value.replace('_', ' ').toLowerCase();
  return value.charAt(0).toUpperCase() + value.slice(1);
})

2。创建一个混入

import Vue from 'vue';

export default {
  /**
   * The methods that the mixin used for filer functions.
   */
  methods: {
    /**
     * Method used to check if specific element is found in an filer
     *
     * @param {filer} filtername filer to find created filter
     *
     * @returns {any} filtered output
     */
    dynamicFilter(filterName, value) {
      return Vue.filter(filterName)(value);
    }
  }
};

3。调用过滤器

    <template>
      {{
        dynamicFilter(data.FilterName, value)
      }}
    </template>

VueJS filterBy with dynamic argument

2 个答案: