【发布时间】：2020-08-16 15:05:43
【问题描述】：
我有一个带有日期选择器的表单，验证按预期工作，但我在浏览器的控制台中不断收到一条错误消息，“规则应该返回一个字符串或布尔值，而不是收到'未定义'”我只是想摆脱它，但我不确定它在何时何地返回未定义的规则。
此外，“未来”规则由于某种原因总是返回 false
<template>
<div>
<v-container>
<v-card>
<div class="container">
<v-form ref="form" v-model="isValid">
<v-row>
<v-col cols="12" sm="12" md="6">
<v-menu ref="menu" v-model="menu" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field v-model="route.departure" label="Departure" color="black" readonly v-on="on" :rules="[rules.required, rules.future]"></v-text-field>
</template>
<v-date-picker v-model="route.departure" no-title scrollable color="amber lighten-2">
<v-spacer></v-spacer>
<v-btn color="red accent-3" class="black-text" @click="menu = false">Cancel</v-btn>
<v-btn color="yellow" class="black-text" @click="$refs.menu.save(date)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="12" md="6">
<v-menu ref="menu_2" v-model="menu_2" :close-on-content-click="false" :return-value.sync="date" transition="scale-transition" offset-y min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field v-model="route.arrival" label="Arrival" color="black" :rules="[rules.required, rules.today, rules.future]" readonly v-on="on"></v-text-field>
</template>
<v-date-picker v-model="route.arrival" no-title scrollable color="amber lighten-2">
<v-spacer></v-spacer>
<v-btn color="red accent-3" class="black-text" @click="menu_2 = false">Cancel</v-btn>
<v-btn color="yellow" class="black-text" @click="$refs.menu_2.save(date)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
</v-row>
</v-form>
</div>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
isValid: true,
date: new Date().toISOString().substr(0, 10),
menu: false,
menu_2: false,
route: {
departure: '',
arrival: '',
},
rules: {
required: value => !!value || 'Required.',
arrival: value => {
return (new Date(this.route.departure) < new Date(this.route.arrival) || 'Arrival date must be after the Departure date');
},
future: value => {
return (new Date() <= new Date(this.route.departure) && (new Date() <= new Date(this.route.arrival))) || "Date must be today's date or after"
}
}
}
},
}
</script>
【问题讨论】：
-
您在哪里更新
departure和arrival字段？ -
来自每个日期选择器中的
v-text-field，这些字段具有作为v-model的departure和arrival字段
标签： vue.js vuetify.js