Vuetify将规则验证应用于自定义组件

Question

我希望在自定义组件上使用 Vuetify自定义验证。例如，我创建了一个日期时间选择器组件。

DateTimePicker.vue

<template>
  <v-menu v-model="menu" :close-on-content-click="false" full-width max-width="290" transition="scale-transition">
    <!-- Text field -->
    <v-text-field slot="activator" :label="label" append-icon="date_range" solo
                  :value="formattedDate" readonly></v-text-field>

    <!-- Date picker -->
    <v-date-picker v-model="selectedDate" locale="fr-fr" v-if="datePicker" :min="minDate">
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="menu = false">{{ $t('cancel') }}</v-btn>
      <v-btn flat color="primary" @click="chooseDate">{{ $t('ok') }}</v-btn>
    </v-date-picker>

    <!-- Time picker -->
    <v-time-picker v-if="!datePicker" v-model="selectedTime" format="24hr" :min="minTime" :allowed-minutes="allowedStep">
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="menu = false">{{ $t('cancel') }}</v-btn>
      <v-btn flat color="primary" @click="chooseTime">{{ $t('ok') }}</v-btn>
    </v-time-picker>
  </v-menu>
</template>

我希望在父组件中对我的自定义组件应用规则验证。

Parent.vue

   <v-container fluid grid-list-xl>
      <v-layout row wrap class="pt-4">
        <v-flex xs12 md3>
          <v-autocomplete ref="city" v-model="city" :items="locations" item-text="description" :label="$t('stores')" solo
                          :rules="[rules.required]"></v-autocomplete>
        </v-flex>

        <!-- Start date picker -->
        <v-flex xs12 md3>
          <date-time-picker ref="startDate" v-model="startDate" :label="$t('start_date')" :rules="[rules.required]"></date-time-picker>
        </v-flex>

        <!-- End date picker -->
        <v-flex xs12 md3>
          <date-time-picker v-model="endDate" :label="$t('end_date')"></date-time-picker>
        </v-flex>

        <v-flex xs12 md3>
          <v-btn class="primary btn-bigger" @click="valdiate" block> {{ $t('search') }}</v-btn>
        </v-flex>

      </v-layout>
    </v-container>

我希望你能为我的 v-autocomplete 做同样的事情。我尝试在我的自定义组件中将 rules 属性用于我的 <date-time-picker>，并在其中使用它在我的 <v-text-field> 上，但它不起作用，我得到了这个错误: _this2.$refs[f].validate is not a function 我按照 文档 中的代码编写了相同的代码，因此它对我的 <v-autocomplete> 有效，但我不知道如何针对我的自定义组件实现。

- John

Answer 1

你需要将规则数组作为props从你的父组件发送到你的子组件（DateTimePicker），然后在你的v-text-field组件中绑定它（在你的子组件：DateTimePicker内部）。

例如： 1. 在你的组件（DateTimePicker）中添加一个属性“rules”。例如：

    props: { 
        rules: {
            type: Array,
            required: false
        }
    }

2. 然后在你的 v-text-field 组件中绑定规则 (:rules="rules")。例如：

    <v-text-field slot="activator" :label="label" append-icon="date_range" solo
                  :value="formattedDate" readonly
                  :rules="rules">
    </v-text-field>

3. 然后，在父组件中将规则绑定到您的子组件上。您不需要任何更改，因为您已经使用:rules="[rules.required]"完成了它。例如：

        <v-flex xs12 md3>
          <date-time-picker ref="startDate" v-model="startDate" :label="$t('start_date')"
                    :rules="[rules.required]">
          </date-time-picker>
        </v-flex>

- Ariel Carrera

---

并且对于v-form有效 - zardilior

这并不完全可行，如果您试图将v-model保持为日期对象，对吧？v-text-field将被设置为字符串表示形式，并且规则将从文本字段中获得字符串结果。 - Nathan Tregillus