Vue中使用form-wizard组件如何设置默认激活的分步步骤？

Vue Form Wizard 内置了start-index属性用来指定默认激活的步骤，步骤索引从0开始计数，你要默认激活第二个「Additional Info」步骤，对应索引值为1。

1. 基础修改方案（推荐） #

直接给<form-wizard>标签添加start-index="1"属性即可，修改后的完整HTML代码如下：

<div id="app">
<div>
        <form-wizard @on-complete="onComplete" 
                      shape="square"
                      color="#3498db"
                      start-index="1">
            <tab-content title="Personal details"
                         icon="ti-user">
              My first tab content
            </tab-content>
            <tab-content title="Additional Info"
                         icon="ti-settings">
              My second tab content
            </tab-content>
            <tab-content title="Last step"
                         icon="ti-check">
              Yuhuuu! This seems pretty damn simple
            </tab-content>
        </form-wizard>
 </div>
</div>

2. 动态切换方案（可选，适合运行时修改激活步骤） #

如果需要在代码运行过程中动态切换激活步骤，可以给form-wizard组件绑定ref属性，调用组件内置的activateTab(index)方法实现：

1. HTML部分添加ref属性：

<form-wizard @on-complete="onComplete" 
              shape="square"
              color="#3498db"
              ref="wizard">

2. JS部分添加调用逻辑，示例为组件挂载完成后自动切换到第二个步骤：

Vue.use(VueFormWizard)
new Vue({
 el: '#app',
 mounted() {
   this.$refs.wizard.activateTab(1)
 },
 methods: {
  onComplete: function(){
      alert('Yay. Done!');
   }
  }
})

内容的提问来源于stack exchange，提问作者Miedkes