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-ためのループは次のようになります。

<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