Vue.js 2.0多步向导

Question

我正在使用Vue.js 2.0开发一个多步骤向导。

我的基础是我使用vue 1.0.26找到的一个例子。

我已经更新了代码并认为它​​有90％，但无法弄清楚如何修复它，这里是我的代码片段

data: {
    currentstep : 1,
    indicatorclass: true,
    step: 1,
    active: 1,
    firststep: 1,
    nextStep: 2,
    lastStep: 0,
    laststep: 3,
    steps: [
        { 
            id: 1, 
            title: 'Position', 
            icon_class: "fa fa-map-marker" 
        }, { 
            id: 2, 
            title: 'Category', 
            icon_class: "fa fa-folder-open" 
        }, { 
            id: 3, 
            title: 'Send', 
            icon_class: "fa fa-paper-plane" 
        }
    ]
},

可以看到整个项目here。您可以看到它遍历各个步骤，但会引发突变错误。还必须有其他错误，因为步骤指示器在不应该（并且错误地）时显示在下面。

Answer 1

两件事：

1. 将模板移到HTML的其余部分之外。它们不是文档流程的一部分。对我来说，这摆脱了无关的步骤指标。

2. 而不是修改事件中的道具发射：

   this.$emit('step-change', ++this.currentstep)
   

   将新值作为计算发送：

   this.$emit('step-change', this.currentstep + 1)
   

   所以你不要改变道具。