javascript - 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. 而不是修改事件中的 prop:

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

   将新值作为计算发送:

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

   所以你没有改变 prop。