Reasons and solutions for v-for and v-if not to be used together

Reason for error:
When v-if and v-for are used together, v-for has a higher priority than v-if, which means that v-if will run repeatedly in each v-for loop.

Therefore, it is not recommended to use v-if and v-for at the same time

Recommended method:

<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{
   
   { user.name }}
</li>
</ul>

Put it on the outer element or wrap it with the template tag (template is a new tag of html5, no special meaning)

<template v-for="Oitem in Object.keys(cItem)">
          <el-input 
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 8}"
              :key="Oitem"
              v-if="Oitem !== 'title'"
              v-model="cItem[Oitem]">
           </el-input>
</template>

Note: The key value is in the wrapped element

When they are at the same node, v-for has a higher priority than v-if, which means that v-if will run repeatedly in each v-for loop. This priority mechanism is very useful when you want to render nodes for only some items, as follows:

<li v-for="todo in todos" v-if="!todo.isComplete">
{
   
   { todo }}
</li>

The above code only passes unfinished todos.
And if your goal is to conditionally skip the execution of the loop, then use the first two methods.