Vue presents the business process according to the options selected


vue shows the business process according to the options selected. For example, I select the options for module assembly, finished product, quality inspection and warehousing, and then click next. It shows the first page that shows the module assembly, the second page that shows the finished product, and so on the page
html:

that shows the selected button.
<form action="" class="choose-form">
  <ul>
    <li v-for="(list,index) in lists" :key="index">
      <input :id="list.val" type="checkbox" :value="list.val" v-model="isSelected" @click="clickBtn">
      <label :for="list.val">{{list.title}}</label>
    </li>
  </ul>
  <div class="select-btn">
    <div class="pre-btn">
      <img @click="$router.back(-1)" src="../assets/imgs/history.png" alt="">
    </div>
    <div class="next-btn">
      <img @click="nextBtn" src="../assets/imgs/next.png" alt="">
    </div>
  </div>
</form>

js:
export default {

data () {

return {
  checked: true,
  isSave: false,
  isSelected: [],
  lists: [
    {val: "yl", title: ""},
    {val: "mk", title: ""},
    {val: "cp", title: ""},
    {val: "zj", title: ""},
    {val: "cc", title: ""},
    {val: "wl", title: ""},
    {val: "xs", title: ""}
  ]
}

},
methods: {

// checkboxclickchecboxvaluemodel
// setTimeout
clickBtn: function () {
  var self = this
  setTimeout(function () {
    console.log(self.isSelected)
  }, 0)
},

}
}
what should I do with such a function?

Nov.19,2021

you can encapsulate the module corresponding to each option into a component, and then use < component > to reference

.
Menu