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)">

如何在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中的类似示例。

但你也可以这样尝试：

您可以创建一个名为v-hide的{{3}}，并将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方法的计算项，以便您有一个数组，其中所有元素在实际渲染之前传递测试函数（在这种情况下，只返回奇数）： / p>

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

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

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

3 个答案: