element-ui step步骤条的使用问题

Question

自己学着做一个it备件库管理系统的维护模块，维护模块里我想对应每种it硬件都有对应的维护步骤，我在点开每一台设备进行维护的时候从后台返回对应的“维护项目“数组，我想通过步骤条的形式，对应每一条维护项目进行操作，如果其中有一条维护项目出现问题，将从此条步骤返回后台，反之步骤条全部进行完毕，将从最后一步骤条返回后台。 但是我在前端操作步骤条的时候，发现没办法操作每一条步骤条。

  </el-step>
</el-steps>
<el-button style="margin-top: 12px;" @click="next()">下一步</el-button>

data() {
item: [],
arr:[],
}
methods: {
next() {
if (this.active++ > 5)
{
this.active=0;
};
问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我的想法是把这个数据用v-for循环出来也就是图示的样子，但是我发现绑定不了每一条步骤。我一度想考虑换成复选框去实现了，但是我想试试这种方式能不能行。谢谢各位！

我在做这个步骤条的时候想要类似一些登录功能的样式，上方是对应的步骤，对每个步骤下方都能进行按钮操作。

Answer 1

1.data应该是有return的一个函数
data(){
return ｛
｝
}
2.在data中声明一下active，目前看你的active不是一个响应式数据，所以你改变this.active的值 进度条没有变化，steps上面也需要绑定active

<template>
  <div>
    <el-steps :active="active"  align-center finish-status="success">
      <el-step v-for="(item,key) in list" :key="key" :title="item.message"></el-step>
    </el-steps>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        active: 0,
        list: [{
          message: "外观检测"
        },{
          message: "电池效率检测"
        },{
          message: "系统功能检测"
        },{
          message: "硬盘检测"
        },{
          message: "通电测试"
        },{
          message: "信号测试"
        }],
      };
    },
    methods: {
      next() {
        if (this.active++ > 5) this.active = 0;
      }
    }
  }
</script>