Задать вопрос
@be_a_man
vue

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

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

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

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

5c45abe38f757470475965.png
  • Вопрос задан
  • 194 просмотра
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 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 на элемент.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Senior Frontend VueJS (частичная занятость)
Онград+
от 125 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Очень срочно нужно помочь запустить программу с UI
26 апр. 2024, в 00:13
1000 руб./за проект
Ещё заказы