Vee-validate child date-picker component

Question

I am trying to write validate to my custom components using vee-validate (vue version 2.5.3, vee-validate version 2.1.0-beta.7). Everything works fine except that fact that none of my datepickers pass validation.

PARENT.VUE

template(v-for="(item, index) in items")
  div(class="initials")
    edit-date-field(:date="item.start"
                    :date_errors="errors.collect('start[' + index + ']')"
                    :name="startDate"
                    :data-vv-name="'start[' + index + ']'"
                    v-validate="'required'"
                    @date-picker="updateDate(item, 'start', $event)"
                    data-vv-as="date"
                    )
   edit-date-field(:date="item.end"
                   :date_errors="errors.collect('end[' + index + ']')"
                   :name="endDate"
                   :data-vv-name="'end[' + index + ']'"
                   v-validate="'required'"
                   data-vv-as="date"
                   @date-picker="updateDate(item, 'end', $event)")
 v-flex(xs12 sm12 md10 pa-2)
   v-text-field(
              slot="input"
              label="College"
              v-model="item.name"
              :error-messages="errors.collect('college[' + index + ']')"
              v-validate="'required'"
              :data-vv-name="'college[' + index + ']'"
              data-vv-as="college name"
              )
 v-flex(xs12 sm12 md10 pa-2)
   v-text-field(
              slot="input"
              label="Degree"
              v-model="item.degree"
              :error-messages="errors.collect('degree[' + index + ']')"
              v-validate="'required'"
              :data-vv-name="'degree[' + index + ']'"
              data-vv-as="degree"
              )
v-btn(v-if="!item.id" color="primary" @click="create(item)" depressed small) Save

CHILD.VUE

<template lang="pug">
  v-layout(row wrap)
    v-flex(xs12 sm9)
      v-menu(
            ref='menu'
            lazy
            :close-on-content-click='false'
            transition='scale-transition'
            offset-y=''
            full-width
            :nudge-right='40'
            min-width='290px'
            )
        v-text-field(
                    slot="activator"
                    v-model='datePicker'
                    :error-messages="date_errors"
                    :label='name'
                    prepend-icon='event'
                    readonly
                    )
        v-date-picker(
                   v-model='datePicker'
                   color="indigo"
                   min='1950-01-01'
                   max='2020-01-01'
                   @input="updateDate(datePicker)"
                   )
</template>
<script>
export default {
  props: {
    menu: {
      type: Boolean,
      default: false
    },
    date: {
      type: String
    },
    name: {
      type: String,
      required: true
    },
    date_errors: {},
  },
   data() {
     return {
       datePicker: this.date
     }
   },
   methods: {
     updateDate(value) {
       this.$refs.menu.save(value);
       this.$emit('date-picker', value)
     }
   }
};
</script>

So my college and degree validations work fine, but edit-date-field not. I tried to put my code to codesandbox but without success. I attach gif I made to provide more information. Thanks in advance. Gif

Roman Alekseiev Roman Alekseiev · Accepted Answer · 2018-08-05T18:45:01

I am pretty bad in searching... Author of VeeValidate made this amazing demo for us: Component + datepicker demo

The main point was to get proper value from datepicker.

Vee-validate child date-picker component

2 Answers