Vue.js 2.0 Multi-step Wizard

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. Вместо изменения пропеллер в вашем случае выделяют:

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

   отправить новое значение как вычисление:

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

   так что вы не мутирует опору.