vue.js 如何在 for 循环中调用函数并传递当前项？

Question

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 a v-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?

Answer 1

First of all you can't do v-for on a <template> tag as you can have only one element per template.

You can add a v-if on the same element as v-for, and it just won't render the element that doesn't pass the v-if. If it's a spearate component per row then it's better to do v-for in parent component and pass the issue by props to child component.

Parent:

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

Child:

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

Answer 2

Your scenario works with a similar example in this fiddle .

But you can try it this way also:

You can create a custom directive named v-hide and pass issue to it as its value.

Then in the directive you can test for testIssue() and set the particular element's display to none

<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

You can also try creating a computed item that makes use of the filter method so that you have an array where all elements pass the test function before actually rendering (in this case, just returning odd numbers):

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

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