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

Question

在for循环中使用vue.js 2，我只需要在当前迭代项通过一些测试时才渲染一行。

测试很复杂，所以简单的v-if="item.value == x"不会这样做。

我编写了一个名为testIssue的函数，它接受该项并返回true或false，并尝试使用av-if，如下所示：

<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从未被称为。

如果我将行更改为<tr v-if="testIssue">，则调用该函数，但之后我没有需要测试的issue变量。

我也试过<tr v-if="releaseApp.testIssue(issue)">

如何在for循环中调用v-if声明中的函数并传递当前项？

Answer 1

首先，你不能在v-for标签上执行<template>，因为每个模板只能有一个元素。

您可以在与v-for相同的元素上添加v-if，并且它不会渲染不通过v-if的元素。如果它是每行的特殊组件，那么最好在父组件中执行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中的类似示例。

但你也可以这样尝试：

您可以创建一个名为custom directive的v-hide并将issue作为其值传递给它。

然后在指令中，您可以测试testIssue()并将特定元素的显示设置为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

您还可以尝试创建一个使用filter方法的计算项，以便您有一个数组，其中所有元素在实际渲染之前传递测试函数（在这种情况下，只返回奇数）：

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

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