2

我正在尝试使用 vee-validate（vue 版本 2.5.3，vee-validate 版本 2.1.0-beta.7）向我的自定义组件写入验证。一切正常，除了我的日期选择器都没有通过验证。

父视图

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

童装

<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>

所以我的大学和学位验证工作正常，但编辑日期字段不行。我试图将我的代码放到代码沙箱中，但没有成功。我附上我制作的 gif 以提供更多信息。提前致谢。动图

4

2 回答 2

2

我在搜索方面很糟糕...... VeeValidate 的作者为我们制作了这个惊人的演示： 组件 + 日期选择器演示

要点是从日期选择器中获得适当的价值。

于 2018-08-05T18:45:01.627 回答
0

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

尝试通过 props 传递验证规则。例如：

在父母

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
                )
于 2018-08-05T08:28:06.217 回答