What's the best way to do it with Vue.js?

Question

Vue.js

There is a step by step form. What fields will be at each step comes in JSON'e => stored in Vuex.
At each step, you need to check the fields for validity / required (if it is) and signal the parent to activate / deactivate the Next button.
The filled data is written in state to an array.
1) How to optimally listen to the fields and signal to the parent?
2) How to optimally render all the steps at once and scroll through them back and forth or when clicking on Next Prev one at a time?

Answer 1

1. The change events on the field modify the state of the component, on which the computable properties that determine whether the form is valid or not depend.

Example

<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. Depends on whether all fields should be rendered unconditionally or optionally.

Difference between v-if and v-show

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