[Vuejs]-Vue 2 call method in v-for performance issue

by

3👍

By using v-model on nested item in "items" you are invoking global change on "items" variable, and by that the whole html is re-rendered because there was sensed change.
You want this re-render because v-model made some changes you want to keep displaying updated data.

👤ElizabethSetton

1👍

<div id="app">
  <div v-for="item in items" :key="item.id"> <------- 1.LOOP here
    <input v-model="item.test">
    <div>{{ someFunction(item) }}</div> <--------2.FUNCTION call here
  </div>
</div>
  1. that means you go through each item in items array.
  2. each iteration calls the method someFunction(item)

if you want a conditional executing you should <div v-if="onlyIfIwant">{{ someFunction(item) }}</div> wrap it into a v-if to prevent the function call

update

if you want conditional executes of the someFunction() then of course you have to add a flag in your objects like this:

data: {
    items: [
                {
                    id: 0,
                    test: 'test1',
                    execute: true
                },
                {
                    id: 1,
                    test: 'testSomething',
                    execute: false
                },
                {
                    id: 2,
                    test: 'foo',
                    execute: false
                },
                {
                    id: 3,
                    test: 'bar',
                    execute: true
                },
            ]
  },

your v-if just needs the following:

<div v-if="item.execute">{{ someFunction(item) }}</div>
👤Deniz

Leave a comment