Pass arguments to computed properties

Here's what I'm trying to do : I want to show or hide an element (using v-show ) depending on wether or not the result of a function is true. I've tried passing a method as the parameter between the {{ }}for output, but the problem with it is that it won't re-render if the values change.

I've read about ways to force Vue to re-render, and everytime someone points to computed properties. The problem is, I need to loop through soem items and paste the current iteration as an argument to that computed propery, and it's not working.

Here's the code that I'm using to display the HTML :

<div v-for="(option, values) in facets">
    <ul>
        <li v-for="(value, count) in values">
            <button class="btn btn-sm btn-default" @click="toggleFacetValue(option, value)">{{ value }}   ( {{ count }} )</button>
            <strong v-show="isActive(option, value)">Active</strong>
        </li>
    </ul>
</div>

And here is my computed property :

computed:{
    isActive: function(option, value){
        return true;
    }
},

Is there a way to achieve what I want? In this case I'm just returning true for testing purposes, but I'll need to do some processing to the arguments and return true or false depending on the result.

It works the first render if I make isActive() a method and not a computed property, but then it won't re-render when the values change.

logaretm

9 years ago

Level 9

I don't think you can pass arguments to the computed properties, because they are properties. A slightly more complex than asimple getters.

So I suggest you use components to overcome the issue by extracting the strong element to a custom component that can accept properties, something like this:

const stronger = {
    props: ['option', 'value'],
  template: '<strong v-show="isActive">Active</strong>',
  computed: {
    isActive() {
            return true;
    }
  }
};

Whenever the value changes it will update because its being observed as a property in the component. I think you can also extract even more into the component, maybe the entire li element in the inner loop can be wrapped in a component.

I've created a fiddle that should be similar to what you have. note that I've associated the :value with the count just to demo that it can detect changes to values.

zachleigh

9 years ago

Level 47

Can you use a method instead of a property?

Demers94

9 years ago

Level 13

@logaretm Thank you very much, I will try that tomorrow and report back. :)

@zachleigh I can, and it works for the first time, but it's not being re-rendered if some other variables change. I can't find a way to force a Vue re-render manually.

zachleigh

9 years ago

Level 47

Can you set the parameters on the vue instance? Then you could access them in the computed property.

ikbelkirasan

7 years ago

Level 4

Yes, but you'll not have any caching benefits.

computed: {
    isActive(){
        return (option, value) => {
            return true
        }
    }
}

Please or to participate in this conversation.