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

两件事：

将您的模板移到 HTML 的其余部分之外。它们不是文档流的一部分。对我来说，这摆脱了多余的步骤指示器。
而不是修改事件中的道具发出：
```
this.$emit('step-change', ++this.currentstep)
```
将新值作为计算发送：
```
this.$emit('step-change', this.currentstep + 1)
```
所以你没有改变道具。

Vue.js 2.0 多步向导

Vue.js 2.0 Multi-step Wizard

javascript

laravel

vue.js

vue-component

vuejs2