Vue Form Component

wd-form.vue

<template>
  <form @submit.prevent="submit">
    <slot />
  </form>
</template>

<script>
import Vue from 'vue'
import { onMounted, ref } from '@nuxtjs/composition-api'

export default {
  name: 'WdForm',
  setup(props, { slots, emit }) {
    const fields = ref([]);
    const errors = ref({});
    const valid = ref(true);

    function submit() {
      if (!validate()) {
        return
      }

      emit('submit', props.value)
    }

    function validate() {
      console.log('validate', fields.value)
      errors.value = {}
      valid.value = true

      for (const field in fields.value) {
        console.log('field.rule', field.rule)
        if (
          field.rule==="required" &&
          !this.value[field.name]
        ) {
          Vue.set(errors, field.name, 'form.required')
          valid.value = false
        }
      }

      return valid.value
    }

    onMounted(() => {      
      const children = slots.default();

      for (const child of children) {
        if (!child?.componentOptions?.propsData) {
          continue;
        }

        fields.value.push(child.componentOptions.propsData);
      }
    })

    return {
      fields,
      submit
    }
  },
}
</script>