我想使用 Vuetify custom validation在自定义组件上。
例如我创建了一个日期时间选择器组件
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
相同的事情.我试图在我的 <date-time-picker>
上使用规则 Prop 并在我的 <v-text-field>
上使用它在我的自定义组件中,但它不起作用我收到此错误:
_this2.$refs[f].validate is not a function
我采用了与 documentation 相同的代码所以它适用于我的 <v-autocomplete>
但我不知道如何处理我的自定义组件。
最佳答案
您需要将规则数组作为 Prop 从您的父组件发送到您的子组件 (DateTimePicker),然后将其绑定(bind)到您的 v-text-field 组件中(在您的子组件内:DateTimePicker)。
例如
- 向您的组件 (DateTimePicker) 添加属性 “rules”。例如
props: {
rules: {
type: Array,
required: false
}
}
- 然后在您的 v-text-field 组件中绑定(bind)规则 (:rules="rules")。例如
<v-text-field slot="activator" :label="label" append-icon="date_range" solo
:value="formattedDate" readonly
:rules="rules">
</v-text-field>
- 然后,将规则 绑定(bind)到父组件中的子组件。您不需要任何更改,因为您已经使用 :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>
关于javascript - Vuetify 将规则验证应用于自定义组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54556289/