Feathers-vuex: FeathersVuexFormWrapper with Vuelidate

[ericirish]

It would be wonderful to have an example of using the FeathersVuexFormWrapper component with what seems to be one of, or _the_ most popular validation library: vuelidate. Maybe it's not possible, but it would seemingly be the act of making the clone available to vuelidate.

[marshallswain]

This is definitely possible, already, but probably not in the way you might be thinking. Vuelidate validations would be handled inside the nested component. In the case of the below example, Vuelidate would be used inside the SomeEditor component:

<template>
  <FeathersVuexFormWrapper :item="currentItem" watch>
    <template v-slot="{ clone, save, reset, remove }">
      <SomeEditor
        :item="clone"
        @save="save().then(handleSaveResponse)"
        @reset="reset"
        @remove="remove"
      ></SomeEditor>
    </template>
  </FeathersVuexFormWrapper>
</template>

By the time a form submission reaches the FeathersVuexFormWrapper, the data should already have been validated.

I'm working on another awesome project for the FeathersJS community right now, which will really improve people's experience with Feathers-Vuex, so I won't make time for this for a week or so, maybe more. I'm going to keep this open because this is a great idea to add to the common patterns section of the docs.

Thank you!

[ericirish]

Thanks for the response and all of the hard work @marshallswain!

[anli-xsigns]

I'm facing the same problem - I try to validate the input inside the SomeEditor component with vuelidate. My problem is that the error is always shown, even if the input is valid.

My parent component looks like above:

<FeathersVuexFormWrapper :item="item" watch>
  <template v-slot="{ clone, save, reset, remove }">
    <BuildingEditor :item="clone" @save="save().then(handleSaveResponse)" @reset="reset" @remove="remove"></BuildingEditor>
  </template>
</FeathersVuexFormWrapper>

My BuildingEditor component looks like this:

<template>
  <form class="q-pa-md full-width" @submit.prevent="$emit('save')">
    <input v-model="item.name" @blur="$v.building.name.$touch">
    <div class="error" v-if="!$v.building.name.required">Name is required</div>
    <button type="submit">Save</button>
    <button type="button" @click="$emit('reset')">Reset</button>
    <button type="button" @click="$emit('remove')">Delete</button>
  </form>
</template>

<script>

  import {email, minLength, required} from "vuelidate/lib/validators";

  export default {
    name: 'BuildingEditor',
    props: {
      item: {
        type: Object,
        required: true
      }
    },

    validations: {
      building: {
        name: { required },
      }
    },
  }
</script>

However the error is always shown, even if the input is valid.

Any help or an example would be greatly appreciated! Thanks in advance!

[marshallswain]

@anli-xsigns I've added an example to the docs that shows how to use the new Vuelidate composition API. Vuelidate alpha is a tad bit buggy, but it's all I can offer at this point, because I usually do validations manually. ;)

[marshallswain]

Here's the example: https://vuex.feathersjs.com/feathers-vuex-forms.html#vuelidate-2-example

When Vuelidate 2 is actually released (which I imagine will be AFTER Vue 3 is released), I'll update the example to something more concrete and applicable.