elementui el-step step bar component rendering order, sequence number disorder, state disorder problem

1. Problem description

The following piece of code adds the v-if judgment condition, which sometimes causes problems on the page, and the order of the step bars will be disordered. If this phenomenon is normal when the page step bar is viewed under the condition of show=false, it will not It is found that there is a problem, and there will be a problem in the case of show=true. . . It is displayed as AB (the serial number becomes 5)-CDE (the serial number becomes 4), as shown in the figure below:

the code that caused the error

<el-steps :active="active" finish-status="success" align-center>
  <el-step title="A"></el-step>
  <el-step v-if="show" title="B"></el-step>
  <el-step title="C"></el-step>
  <el-step title="D"></el-step>
  <el-step title="E"></el-step>
</el-steps>

2. Reason

The rendering order of the step bar components is controlled, and the step bar with judgment logic will be rendered at the end, which causes the above problems

3. Solve

1. Write in two paragraphs, one kind of step bar is rendered in the case of show=true, and another kind of step bar is rendered in the case of show=false.

<el-steps v-if="show" :active="active" finish-status="success" align-center>
 <el-step title="A"></el-step>
 <el-step title="B"></el-step>
 <el-step title="C"></el-step>
 <el-step title="D"></el-step>
 <el-step title="E"></el-step>
</el-steps>
<el-steps v-else :active="active" finish-status="success" align-center>
 <el-step title="A"></el-step>
 <el-step title="C"></el-step>
 <el-step title="D"></el-step>
 <el-step title="E"></el-step>
</el-steps>

2. Use the v-for loop to render the step bar, and the list data is different when show=true or false.

<el-steps :active="active" finish-status="success" align-center>
 <el-step v-for="(item, index) in list" :key="index" :title="item.title"></el-step>
</el-steps>

data() {
   return {
     list: [
       {title: 'A'},
       {title: 'B'},
       {title: 'C'},
       {title: 'D'},
       {title: 'E'}
     ]
   }
 },
 methods: {
   listHandle() {
     if(!this.show) {
       this.list = this.list.splice(1,1) // 删除索引的1的1个元素
     }
   }
 }