Как правильно организовать последовательность заполнения формы на js?

Question

[danilr]

Есть вот такие шаги, они должны заполняться последовательно - пока первую не заполнишь и не нажмёшь далее, следующие недоступны. Интересна логика js как это организовать. Использую вью фреймворк.

Answer 1

[Alex]

Используйте директиву v-if которая будет отображать контент одной секции в зависимости от того была ли заполнена предыдущая секция

Comments

[danilr]

спасибо кэп

[Andrey Suha]

danilr, а чего вы ожидали в ответе? По сути это все что Вам нужно

[danilr]

Andrey Suha, вопрос именно в скрипте определения предыдущего шага и что он заполнен.

[Дмитрий]

danilr, то есть за вас придумать и написать?

[Andrey Suha]

danilr, в data содаете currentStep, изначально 0, когда заполните первый шаг меняете 0 на 1 и.т.д

[danilr]

Дмитрий, подсказать логику последовательности действий. Я пробовал делал, но вышло слишком криво, много условий if. Думал, идею хорошую подскажут

[danilr]

Andrey Suha, вот есть в data данные:

data(){
  steps: [ 
   {
    id: 'one',
    value: '1000',
    clicked: 'true'
    },
   {
    id: 'two',
    value: '',
    clicked: false
    },
  ],
   currentStep: 0

допустим, я заполнил первый валью и кликнул по кнопке далее, currentStep стал 1, но если по первому ещё раз кликнул, currentStep станет уже 2 и если в html через v-if делать, основываясь на текущем шаге (v-if="currentStep > 1", то откроется третий блок, который не должен открываться.

[Andrey Suha]

danilr,
А Вы не делайте инкремент на кнопке, а сделайте метод который будет принимать номер следующего шага и решать переключать шаг или нет. Потом по каждому "далее" передавайте номер шага на который хотите переключить