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

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

MatWaligora · Accepted Answer · 2017-07-04 09:23:51Z

3

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>

edited Jul 4, 2017 at 9:23

answered Jul 4, 2017 at 9:06

MatWaligora

1,1971 gold badge12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vamsi Krishna Over a year ago

Seeing the code @delightedDOD is not using single file components where template element is present. he just doing it the plain javascript way. So v-for on template tag is possible as it is inside some parent element which has id #release-app. See this fiddle ( jsfiddle.net/r_vamsi_krishna/50pgoo5u/3)

MatWaligora Over a year ago

Then yes, he can do it also without child components.

Vamsi Krishna Over a year ago

what do you mean by without child components

Vamsi Krishna Over a year ago

inside his template elementt he just wants <tr> to not be displayed. By placing v-if on the template element itself will conditionally display the whole template element, i think he just wants to conditionally display <tr> inside template element.

tony19 · Accepted Answer · 2022-07-15 23:04:16Z

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

edited Jul 15, 2022 at 23:04

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 4, 2017 at 9:33

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

1 Comment

Wesley Smith Over a year ago

You're right that fiddle does work, and I was sure I had done this before without issue, that proves it. There must be something else going on in my code causing my issue. Thank you, gonna dig some more

aprouja1 · Accepted Answer · 2017-07-04 12:00:25Z

1

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)
    }
  },

answered Jul 4, 2017 at 12:00

aprouja1

1,82011 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related