Vue.js 2.0 多步向导

Question

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

我基于我使用 vue 1.0.26 找到的一个示例。

我已经更新了代码，并认为它是 90%，但无法弄清楚如何修复它，这是我的代码的 sn-p

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)
   

   所以你没有改变道具。