Vue.js 2.0 Mehrschritt-Assistent

Question

Ich arbeite an einem mehrstufigen Assistenten mit Vue.js 2.0.

Ich habe dies auf ein Beispiel basiert, das ich mit vue 1.0.26 gefunden habe.

Ich habe den Code aktualisiert und denke, dass es 90% gibt es aber nicht herausfinden, wie es zu beheben, hier ist ein Ausschnitt aus meinem Code

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" 
     } 
    ] 
}, 

Das vollständige Projekt here zu sehen ist. Sie können sehen, dass es die Schritte durchläuft, aber einen Mutationsfehler auslöst. Es muss auch etwas anderes falsch sein, da die Schrittanzeige unten angezeigt wird, wenn es nicht (und fälschlicherweise) sollte.

Answer 1

Zwei Dinge:

1. Ihre Vorlagen außerhalb der Rest des HTML verschieben. Sie sind nicht Teil des Dokumentenflusses. Für mich war das der überflüssige Schritt Indikator.

2. Statt die Stütze im Falle einer Modifizierung emittieren:

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

   den neuen Wert als Rechen senden:

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

   , so dass Sie die Stütze nicht mutiert.