vue+element ui for cross-topic jump

In our usual development process, the routine answer is to jump to the next question after finishing the previous one, but the requirements I met recently are logical. For example, I choose different options and jump to the corresponding topic. Because of the excessive amount of code, I show some key codes. The following is the process of my implementation.

My questions have radio and multiple choices, so I use v-if to judge display and hide.
Disad= "DisadInspect" is to control the operability of the answering process, that is, the questions that have been manipulated can not be edited.

 <!--Single election-->
            <el-radio-group v-model="resource[index]"
                            v-if="!(paper[index].num===7||paper[index].num===8||paper[index].num===9||
                            paper[index].num===11||paper[index].num===12||paper[index].num===16||
                            paper[index].num===17)"
            >
              <el-radio class="choice-radius" v-for="item in paper[index].selective"
                        :label="item.value" :key="item.value" :disabled="disabledInspect"
              >{{item.label}}</el-radio>
            </el-radio-group>
<!--Multiple selection-->
            <el-checkbox-group v-model="multi"
                               v-if="paper[index].num===7||paper[index].num===8||
                               (paper[index].num===11&&conceal === false)||
                               paper[index].num===12||paper[index].num===16||
                               paper[index].num===17">
              <el-checkbox  class="choice-radius"
                            name="type"
                            v-for="item in paper[index].selective"
                            :label="item.value"
                            :key="item.value"
                            :disabled="disabledInspect"
              >{{item.label}}</el-checkbox>
            </el-checkbox-group>

Topic structure:
num is the title number and selective is the option

[
  {
    "num": 1,
    "title": "......................",
    "selective": [
      { "label": "yes",
        "value": "0",
        "selected": "1"
      },
      { "label": "no",
        "value": "1",
        "selected": "2"
      }
    ]
  }
]

Click on the js code for the next question:
This. disabled Inspect controls the operability of clicking on the next question, and temporary is the logo of the click option. Here's case 3. Let me explain. First, I decide whether the number of options is enough or not, and then I judge the correctness of the options.

this.disabledInspect = false
let temporary = this.resource[this.index]
switch (this.paper[this.index].num) {
      case 1:
        if (temporary === '0') {
          if (this.flip.indexOf(0) === -1) {
            this.flip.push(this.index)
          }
          this.index += 1
        } else if (temporary === '1') {
          this.index = 2
        } else {
          this.$message('Please select the option')
        }
        ;break
      case 2:
        if (temporary === '0') {
          if (this.imageUrl !== '') {
            this.index = 3
            this.imageUrl = ''
          } else {
            this.$message.error('Please upload photos')
          }
        } else {
          if (this.imageUrl !== '') {
            this.index = 5
            flag = true
            this.imageUrl = ''
          } else {
            this.$message.error('Please upload photos')
          }
        }
        ;break
      case 3:
        if (this.multi.join('').length === 3) {
          if (this.multi.join('').indexOf('0') !== -1 &&
              this.multi.join('').indexOf('1') !== -1 &&
              this.multi.join('').indexOf('3') !== -1) {
            this.index = 7
            this.storage[0] = this.multi
            this.multi = []
          } else {
            this.$message.error('Please review the relevant rules and regulations and reply again.')
            this.index = 6
            this.multi = []
            this.storage = {}
          }
        } else {
          this.$message.error('Please review the relevant rules and regulations and reply again.')
          this.index = 6
          this.multi = []
          this.storage = {}
        }
        ;break
        
      }
      //Adding Index to Operated Questions
      if (this.flip.indexOf(this.index) === -1) {
        this.flip.push(this.index)
      }
    },

Click on the js code of the previous question:
case6-16 assigns the array that exists in the storage object to multi, so that when we click on the last question, we won't see the unselected problem.

// Last question
    previous () {
      if (this.index !== 0) {
        this.disabledInspect = true
        this.obtain = --this.flip.length
        this.index = this.flip[this.obtain - 1]
        switch (this.index) {
        case 6 :
          this.multi = this.storage[0]
          break
        case 7 :
          this.multi = this.storage[1]
          break
        case 10 :
          this.multi = this.storage[2]
          break
        case 11 :
          this.multi = this.storage[3]
          break
        case 15 :
          this.multi = this.storage[4]
          break
        case 16 :
          this.multi = this.storage[5]
          break
        }
      }
    },

If you have any questions, please leave a message below.