VueJS filterBy动态参数

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-loop将多次运行，因此每次只显示适当的角色。

有什么办法可以做到这一点？

Answer 1

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

使用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) 
    } 
} 

模板：

<article v-for="phase in phases" class="phase"> 
    ... Other content ... 
    <div v-for="role in filtered(phase.id) "> 
    <p>${role.title}</p> 
    </div> 
</article> 

Exmaple