vue.js How to call a function inside a for loop and pass the current item?

Viewed 7777

Using vue.js 2, inside a for loop, I need to render a row only if the current iterated item passes some test.

The test is complex so a simple v-if="item.value == x" wont do.

I've written a function named testIssue that accepts the item and returns true or false and tried to use that is av-if like this:

<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: []
    },
  }
});

However, testIssue is never called.

If I change the line to <tr v-if="testIssue">, the function is called but then I dont have the issue variable that I need to test.

I also tried <tr v-if="releaseApp.testIssue(issue)">

How can I call a function in a v-if declaration inside a for loop and pass the current item?

3 Answers
Related