Question

我正在尝试使用vee-validate（vue版本2.5.3，vee-validate版本2.1.0-beta.7）将验证写入我的自定义组件。除了我的日期选择器均未通过验证的事实之外，其他所有操作都正常。

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>

因此，我的大学和学位验证工作正常，但edit-date-field却不能。我试图将我的代码放入codesandbox，但没有成功。我附上我提供的gif，以提供更多信息。提前致谢。 Gif

Answer 1

您正在尝试验证整个组件，并且无法确定是否已填充。

尝试通过道具传输验证规则。例如：

在父母中

edit-date-field(:date="item.start"
                :date_errors="errors.collect('start[' + index + ']')"
                :name="startDate"
                :data-vv-name="'start[' + index + ']'"
                :required="true"
                @date-picker="updateDate(item, 'start', $event)"
                data-vv-as="date"
                )

在孩子中

    v-text-field(
                slot="activator"
                v-model='datePicker'
                v-validate="required ? 'required' : ''"
                :error-messages="date_errors"
                :label='name'
                prepend-icon='event'
                readonly
                )

Answer 2

我的搜索工作非常糟糕... VeeValidate的作者为我们做了一个了不起的演示： Component + datepicker demo

主要目的是从datepicker获得适当的值。

Vee验证子日期选择器组件

2 个答案: