#vuejs : How to use parameterized computed property in v-if

[Anshul-Batra]

Hi,

I want to use computed

var $App = {    
    'el':'#elDiv',
    'data':{   },   
     computed:{
test(): function { return obj; },
test2(str) : function { return obj[str];}
},
    "methods":{ }
};

Below is my html file:

<template v-repeat="obj : test"></template>
<template v-repeat="obj : test2('items')"></template>

In my html first v-repeat is working fine because it calls the computed function to get an object. But in second v-repeat it calls parameterized computed function. The second v-repeat is not working.

Please share the solutions, how can i use parameterized computed function in v-repeat

[RangerMauve]

Rather than a computed property, I think you just want to define some methods instead.

Your code could be changed to look like:

var $App = {    
  'el':'#elDiv',
  'data':{   },   
  computed:{
    test: function() { return obj; }
  },
  "methods":{
    test2: function(str) { return obj[str];}
   }
};

[Anshul-Batra]

worked :) thanks

[Anshul-Batra]

It worked but when i created the function 'test2' in methods and used it in v-if like below:

<template v-if="test2(bool) == true">
print something
</template>

var $App = {    
  'el':'#elDiv',
  'data':{   },   
  "methods":{
    test2: function(bool) { 
console.log("in method");
return bool;
}
   }
};

here the test2 function is getting called twice... The console.log is executing twice.

Please let me know how to prevent it.

[RangerMauve]

Not sure that you can prevent that. Might want to just rate limit your function with something like debounce

[Anshul-Batra]

@yyx990803

Hi Evan,

Could you please help me on the same.

Thanks

[azamat-sharapov]

Here is fiddle and method in v-if is not called twice. Next time, create fiddle to show your problem, that way more people will help you and you save their time. Even sometimes you find problem with your code yourself, when creating jsfiddle.