Computed vs method inside nested v-for loop according to Vue docs

Question

On this page, it says that:

In situations where computed properties are not feasible (e.g. inside nested v-for loops), you can use a method

However, I am able to use computed props inside a nested v-for loop (check fiddle)

new Vue({
  el: '#sample',
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    }
  },
  computed: {
    even() {
      return this.numbers.filter(n => n % 2 === 0)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="sample">
  <div v-for="n in numbers">
    {{n}}
    <div v-for="e in even">
      ..{{e}}
    </div>
  </div>
</div>

What am I missing?

In the doc both examples return the same. The “method” option is mentioned to indicate that it is also possible to iterate on the result of a method with v-for. Like the doc says, it is merely useful when working with nested lists (i.e. list dynamically filtered from its parent’s list element). This avoids creating nested computed properties. — thibautg
– thibautg, Commented Feb 14, 2018 at 11:38

Abhishek Jain · Accepted Answer · 2018-02-14 14:48:53Z

Okay so I believe the docs mean that computed properties are not feasible inside nested v-for loops, if, for instance, the inner array depends on the current outer array element.

As a quick example, imagine we want a loop which displays numbers from 1 through 5. And after each number N, we need a nested loop which will contain all the whole numbers leading up to the number N.

Check fiddle to see what I'm talking about.

new Vue({
  el: '#sample',
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    getLeadingNbs(n) {
    	return (Array(n)+'').split(',').map( (n,i) => i )
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="sample">
  <div v-for="n in numbers">
    {{n}}
    <div v-for="l in getLeadingNbs(n)">
      ....{{l}}
    </div>
    <br>
  </div>
</div>

Roy J · Accepted Answer · 2018-02-14 12:29:05Z

0

The docs mean that it is not possible to have a computed for each element of numbers because computeds cannot be created dynamically. It is, however, possible to make a computed that returns an array with one value for each element of numbers.

answered Feb 14, 2018 at 12:29

Roy J

44k10 gold badges84 silver badges106 bronze badges

4 Comments

Abhishek Jain Over a year ago

Don't you mean, ...make a method ..., instead of computed ?

Roy J Over a year ago

No, you can actually make a computed based on an array, using map.

Abhishek Jain Over a year ago

Gotcha. So I guess a method is necessary whenever the inner loop is computed against a particular value from the outer loop. Of the top of my head, an example could be: say the outer loop renders 1, 2, 3, and each of the 5 inner loops should display all the natural numbers leading up to that number. So we have 1 (1), 2 (1,2), 3 (1,2,3) This can't be done simply with computed values, right?

Roy J Over a year ago

Right. It becomes impractical.

Collectives™ on Stack Overflow

Computed vs method inside nested v-for loop according to Vue docs

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related