Vue.js 2.0多步向导

我正在使用Vue.js 2.0的多步向导。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。您可以看到它遍历了这些步骤，但会引发突变错误。还有一些其他的错误，因为当它不应该（以及错误的）时，步骤指示符显示在下面。

来源

2017-01-23 JonnyFoley

两件事情：

移动HTML外其余的你的模板。它们不是文档流程的一部分。对我来说，摆脱了无关的步骤指示器。
而是在事件修改道具发出：
```
this.$emit('step-change', ++this.currentstep) 
```
发送新的值作为计算：
```
this.$emit('step-change', this.currentstep + 1) 
```
这样你就不会变异的道具。

来源

2017-01-23 18:18:22

谢谢罗伊，现在非常有意义，这解决了我的问题！更新了[CodePen]（http://codepen.io/jonnyfoley/pen/rjwLjQ），并将模板从HTML移动到了JS中。 – JonnyFoley

任何想法，如果向导包含表单字段，需要在移动到下一步之前填写，这将看起来如何？ – Mike

@Mike我希望下一步按钮将有一个绑定，将其设置为禁用，直到表单域被填充。 –

Vue.js 2.0多步向导

回答

相关问题