vue.js - Vuetify - 规则应该返回一个字符串或布尔值，而不是收到“未定义”

Question

我有一个带有日期选择器的表单，验证按预期工作，但我在浏览器的控制台中不断收到一条错误消息，“规则应该返回一个字符串或布尔值，而不是收到'未定义'”我只是想摆脱它，但是我不确定它在何时何地返回未定义的规则。

此外，由于某种原因，“未来”规则总是返回 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>

标签： vue.jsvuetify.js

Answer 1

问题来自:rules="[rules.required, rules.today, rules.future]"因为today规则未定义和修改future，并arrival通过添加value日期构造函数的 as 参数：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      isValid: true,
      date: new Date().toISOString().substr(0, 10),
      menu: false,
      menu_2: false,
      route: {
        departure: new Date().toISOString().substr(0, 10),
        arrival: new Date().toISOString().substr(0, 10),
      },



      rules: {
        required: value => !!value || 'Required.',
        arrival: value => {
          return (new Date(value) < 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(value))) || "Date must be today's date or after"
        }

      }
    }
  },



})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <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.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>
    </v-content>
  </v-app>
</div>