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.
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>
- that means you go through each item in
items
array. - 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>
- [Vuejs]-How to implement dialog content destroy function after close vuetify dialog?
- [Vuejs]-Navigating between named routes for same Path/URL
Source:stackexchange.com