javascript - Vuetify apply rules validation to a custom component - Stack Overflow

admin管理员组

文章数量:1405636

I'd like to use Vuetify custom validation on a custom ponent.

E.g I created a date time picker ponent

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>

And I want to apply rules validation on my custom ponent in my parent ponent.

Parent.vue

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

I'd like to do the same thing as I did for my v-autoplete. I tried to use rules props on my <date-time-picker> and use it on my <v-text-field> inside my custom ponent but it doesn't work I got this error :

_this2.$refs[f].validate is not a function

I took the same code as the documentation so it works for my <v-autoplete> but I don't know how can I do for my custom ponent.

I'd like to use Vuetify custom validation on a custom ponent.

E.g I created a date time picker ponent

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>

And I want to apply rules validation on my custom ponent in my parent ponent.

Parent.vue

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

I'd like to do the same thing as I did for my v-autoplete. I tried to use rules props on my <date-time-picker> and use it on my <v-text-field> inside my custom ponent but it doesn't work I got this error :

_this2.$refs[f].validate is not a function

I took the same code as the documentation so it works for my <v-autoplete> but I don't know how can I do for my custom ponent.

• javascript
• validation
• vue.js
• vuetify.js

Share Improve this question Follow asked Feb 6, 2019 at 14:47 JohnJohn 5,0011010 gold badges5353 silver badges107107 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need to send from your parent ponent to your child (DateTimePicker) the array of rules as props and then bind this in your v-text-field ponent (inside your child ponent: DateTimePicker).

For example

1. Add to your ponent (DateTimePicker) a property "rules". Eg

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

2. And then bind rules (:rules="rules") in your v-text-field ponent. Eg

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

3. Then, bind rules to your child ponent in your parent. You don't need any change because you have done it with :rules="[rules.required]". Eg

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

本文标签： javascriptVuetify apply rules validation to a custom componentStack Overflow