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

Question

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

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

我编写了一个名为 testIssue 的函数接受该项目并返回 true 或 false 并尝试使用的是 v-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)">

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

Answer 1

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

你可以在与 v-for 相同的元素上添加一个 v-if，它不会渲染没有通过 v-if 的元素。如果它是每行一个 spearate 组件，那么最好在父组件中执行 v-for 并将问题通过 props 传递给子组件。

家长:

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

child :

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