I currently have a loop which calls the same function twice in that loop like so:

<div class="checkbox" v-for="(value, key) in range">
    <input type="checkbox" :disabled="count(Number(key)) === 0">

    <span class="items">{{ count(Number(key)) }}</span>
</div>

Because the count method is being called twice it makes it harder to debug the count function because on something like a console.log all values will appear twice.

The first count method simply checks if it is zero while the other represents the count. Is there a simple way to re-use the oute of the count method so I don't actually have to call it twice. There is no need to call it again when I already have the oute.

Something like a puted property won't work because I need to pass the current iteration key.

I currently have a loop which calls the same function twice in that loop like so:

<div class="checkbox" v-for="(value, key) in range">
    <input type="checkbox" :disabled="count(Number(key)) === 0">

    <span class="items">{{ count(Number(key)) }}</span>
</div>

Because the count method is being called twice it makes it harder to debug the count function because on something like a console.log all values will appear twice.

The first count method simply checks if it is zero while the other represents the count. Is there a simple way to re-use the oute of the count method so I don't actually have to call it twice. There is no need to call it again when I already have the oute.

Something like a puted property won't work because I need to pass the current iteration key.

• javascript
• vue.js
• vuejs2
• vue-ponent

• 1 You can refactor it: instead of looping range you can create a puted property, say (pseudocode) pCountRange = {rangeKey1: count(Number(rangeKey1)), ...similar pairs} and loop though it. – Egor Stambakio Commented Jun 13, 2017 at 8:45

1 Answer 1

Sadly by design a method will always re-render, there is no cache availible afaik:

In parison, a method invocation will always run the function whenever a re-render happens.

Why do we need caching? Imagine we have an expensive puted property A, which requires looping through a huge Array and doing a lot of putations. Then we may have other puted properties that in turn depend on A. Without caching, we would be executing A’s getter many more times than necessary! In cases where you do not want caching, use a method instead.

Source: https://v2.vuejs/v2/guide/puted.html

By the way I think it's still possible to use a puted property most of the time:

puted: {
    rangeWithCount() {
        // assuming that range is an array, otherwise use Object.entries()
        return this.range.map((value, key) => {
            // assuming value is already an object, otherwise create a new one
            return Object.assign({}, value, {
                count: foo(key)
            });
        })
    }
}

And just iter over the puted prop:

<div class="checkbox" v-for="value in rangeWithCount">
    <input type="checkbox" :disabled="value.count === 0">

    <span class="items">{{ value.count }}</span>
</div>