Как лучше сделать на Vue.js?

Question

[be_a_man]

Имеется пошаговая форма. Какие поля будут на каждом шаге приходит в JSON'е => хранятся во Vuex.
На каждом шаге нужно проверять поля на валидность/required(если оно такое) и сигналить родителю, чтобы активировать/дезактивировать кнопку Next.

Заполненные данные пишутся в state в массив.

1) Как оптимально слушать поля и сигналить родителю?
2) Как оптимально рендерить, сразу все шаги и листать их вперед назад или при клике на Next Prev по одному?

Answer 1

[askhat]

1. События change на поле, модифицируют стейт компонента, от которых зависят вычислимые свойства определяющие валидна форма или нет.

Пример

<template>
  <form>
    <input v-model="text" />
    <button :disabled="!isValid">Submit</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  computed: {
    isValid() {
      return validator(this.text)
    }
  }
}
</script>

2. Зависит от того должны ли все поля быть отрендерены безусловно или опционально.

Разница между v-if и v-show

v-if не отрендерит разметку никогда, если её биндинг не вернёт true.
v-show отрендерит разметку, но в зависимости от своего биндинга установит display: hidden на элемент.

Comments

[be_a_man]

2. Поля рендерятся в зависимости от JSON в форме несколько шагов, на каждом шаге несколько полей, если нет в JSON то и не рендерится. Все что есть должны рендериться безусловно. Легче сразу все срендерить и листать как слайдер. Но как производительнее?

Пример:

{
    "steps": [
        {
            "title": "Step 1",
            "items": [
                {
                    "type": "input",
                    "title": "Введите что-то",
                    "required": true
                },
                {
                    "type": "select",
                    "title": "Выберите что-то",
                    "options": [
                        "Option 1",
                        "Option 2",
                        "Option 3"
                    ],
                    "value": "Option 1",
                    "required": false
                }
            ]
        },
        {
            "title": "Step 2",
            "items": [
                {
                    "type": "textarea",
                    "title": "Введите что-то",
                    "required": false
                },
                {
                    "type": "slider",
                    "title": "Выберите что-то",
                    "min": 100,
                    "max": 1000,
                    "value": 200
                }
            ]
        }
    ]
}

[askhat]

be_a_man, поля которые отрендерятся в любом случае это v-show, остальные v-if