forループの中で関数を呼び出して現在の項目を渡す方法は？

Question

vue.js 2を使用して、forループ内で、現在の反復アイテムが何らかのテストをパスした場合にのみ、行をレンダリングする必要があります。

テストは複雑なので、v-if="item.value == x"はしません。

<template v-for="issue in search_results.issues"> 
    <tr v-if="testIssue(issue)"> 
    .... 
    </tr> 
</template> 


var releaseApp = new Vue({ 
    el: '#release-app', 
    methods: { 
    testIssue: function(issue) { 
     console.log(issue); 
     console.log('test'); 
    }, 
    }, 
    mounted: function() {}, 
    data: { 
    search_results: { 
     issues: [] 
    }, 
    } 
}); 

しかし、testIssueが呼び出されることはありません：

私は項目を受け付けてtrueまたはfalseを返し、それがこのようなv-ifで使用しようとしたtestIssueという名前の関数を書きました。

私が行を<tr v-if="testIssue">に変更すると、関数が呼び出されますが、テストする必要がある変数がissueではありません。

私も<tr v-if="releaseApp.testIssue(issue)">

どのように私は、forループの内部v-if宣言で関数を呼び出すと、現在のアイテムを渡すことができますを試してみましたか？

Answer 1

まずv-forの<template>タグには、テンプレートあたり1つの要素しか指定できないため、できません。

v-forをv-forと同じ要素に追加することができ、v-ifを渡さない要素はレンダリングされません。それが行ごとにspearateコンポーネントの場合は、親コンポーネントでv-forを実行し、子コンポーネントにpropsで問題を渡す方が良いでしょう。

親：

<child-comp v-for="issue in search_results.issues" v-if="testIssue(issue)"> 
</child-comp> 

子供：

<template> 
    <tr> 
    {{issue}} 
    </tr> 
</template> 

Answer 2

あなたのシナリオはthis fiddleに同様の例で動作します。

しかし、あなたはこの方法も、それを試すことができます。

あなたはv-hideという名前custom directiveを作成し、その値としてそれにissueを渡すことができます。あなたはどこの配列を持つように

次にあなたがtestIssue()のためにテストし、どれも

<template v-for="issue in search_results.issues"> 
    <tr v-hide="issue"> 
    .... 
    </tr> 
</template> 


var releaseApp = new Vue({ 
    el: '#release-app', 
    directive:{ 
    hide: { 
     bind(el, binding, Vnode){ 
      var vm = Vnode.context; 
      var issue = binding.value; 
      if(vm.testIssue(issue)){ 
       el.style.display = 'none'; 
      } 
     } 
    } 
    }, 
    methods: { 
    testIssue: function(issue) { 
     console.log(issue); 
     console.log('test'); 
    }, 
    }, 
    mounted: function() {}, 
    data: { 
    search_results: { 
     issues: [] 
    }, 
    } 
}); 

Answer 3

に特定の要素の表示を設定することができますディレクティブでまたfilter方法を利用した計算された項目を作成してみてくださいすることができますすべての要素は、実際には（この場合には、ちょうど奇数を返す）レンダリングする前にテスト関数を渡す：

https://codepen.io/aprouja1/pen/BZxejL

computed:{ 
    compIssues(){ 
     return this.search_results.issues.filter(el => el%2===1) 
    } 
    },