Vuelidate validate component props

Question

I have a component "InputValidate". For now it's just an input with the custom vuelidate. However I can't find anything in the documentation on how I would validate the prop while still maintaining a binding between the parent and child component.

So far this is the component that uses the validator:

<input-validate title="Singular" v-model:value="newItem.singular" />

and this is the component itself (InputValidate):

<template>
  <div class="form-group">
    <label for="name">{{ title }}</label>
    <input
      class="form-control"
      :value="value"
      @input="$emit('update:value', $event.target.value)"
      :class="{ 'is-invalid': v$.value.$error }"
    />
    <div class="invalid-feedback">
      <p v-for="error of v$.$errors" v-bind:key="error.$uid">
        {{ error.$message }}
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useVuelidate } from "@vuelidate/core";
import { required } from "@vuelidate/validators";

const Component = defineComponent({
  name: "inputValidate",

  setup() {
    return { v$: useVuelidate() };
  },

  props: {
    title: {
      type: String,
      default: "Input",
    },
    value: {
      type: String,
      default: "",
    },
  },

  validations() {
    return {
      value: { required },
    };
  },
});

export default Component;
</script>

EDIT: If I put the data inside the "data" field of the view component it works as expected. But I do need the ability to edit the data from the parent. (Eg. Clear the form)

Vuelidate validate component props

0 Answers0