无法验证 v-text-field [从旧版本的 Vuetify 迁移]

Question

自 Entity Framework 5 发布以来，我一直在迁移去年的旧项目。由于我也在从我去年使用的以前版本的 Vuetify 迁移前端（从 2.2.11 到 2.4.0），我遇到了一些我不得不在线查找并修复的问题，但我遇到这个突然的问题，我无法完全理解并且无法找到类似问题的答案。

我正在尝试验证 v-card 中的 v-text-field，以便在 v-text-field 长度小于 3 或大于 50 个字符时不保存记录。尽管我跟进了去年用于验证我的 v-text-field 的相同代码，但我在 chrome 控制台上收到以下错误：

当您单击“保存”时弹出该图像的最后 2 个错误，此时它应该显示验证消息：

组件中使用的代码如下。

对于应在红色描述 v-text-field 下方弹出的验证消息：

VUE:

<template v-slot:top>
    <v-toolbar flat>   
        <v-dialog v-model="dialog" max-width="500px">
            <template v-slot:activator="{ on, attrs }">
                <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">New</v-btn>
            </template>
            <v-card>
                <v-container>
                    <v-row>
                        <v-col cols="12" sm="12" md="12">
                            <v-text-field v-model="name" label="Name"></v-text-field>
                        </v-col>
                        <v-col cols="12" sm="12" md="12">
                            <v-text-field v-model="description" label="Description"></v-text-field>
                                </v-col>
                        <v-col cols="12" sm="12" md="12" v-show="valida">
                            <div class="red--text" v-for="v in validaMessage" :key="v" v-text="v">
                            </div>
                        </v-col>
                    </v-row>
                </v-container>
            </v-card>
        </v-dialog>
    </v-toolbar>
</template>

JAVASCRIPT:

<script>
    import axios from 'axios'
    export default {

        data(){
            return {
                categories:[],
                dialog: false,
                dialogDelete: false,
                headers: [
                    { text: 'Options', value: 'actions', sortable: false, class:"primary--text" },
                    { text: 'Name', value: 'name', class:"primary--text" },
                    { text: 'Description', value: 'description', sortable: false, class:"primary--text" },
                    { text: 'Status', value: 'status', sortable: false, class:"primary--text" },
                ],
                search: '',
                desserts: [],
                editedIndex: -1,
                editedItem: {
                    name: '',
                    calories: 0,
                    fat: 0,
                    carbs: 0,
                    protein: 0,
                },
                id: '',
                name: '',
                description: '',
                valida: 0,
                validaMessage:[]
            }
        },
        methods: {
            save () {
                if (this.valida()){
                    return;
                }
                if (this.editedIndex > -1) {
                    //Code to update
                } 
                else {
                    let me=this;
                    axios.post('api/Categories/Create',{
                        'name': me.name,
                        'description': me.description
                    }).then(function(response){
                        me.close();
                        me.list();
                        me.clean();
                    }).catch(function(error){
                        console.log(error);
                    });
                }
            },
            valida(){
                this.valida=0;
                this.validaMessage=[];
                if (this.name.length < 3 || this.name.length > 50){
                    this.validaMessage.push("The name must have between 3 and 50 characters.")
                }
                if (this.validaMessage.length){
                    this.valida=1;
                }
                return this.valida;
           }
       },  
   }
</script>

这是它在我的旧版本项目中的显示方式：

我不知道 Vuetify 更新版本从 2.2.11 到 2.4.0 的某些更改是否干扰了在组件内实现此方法以显示或隐藏验证消息的能力.我正在尝试解决此问题，以避免不得不重新使用 vee-validate 或 vuelidate 等第三方验证服务。会是什么呢？感谢您花时间阅读本文！

Answer 1

总结起来，这些是错误的原因：

有一个数据属性和一个同名的方法 - valida
v-btn 组件有一个已删除的方法 initialize 提供给 @click 事件。

还有另一个小费作为奖励：

您有一个跨越 12 列的 v-col：<v-col cols="12" sm="12" md="12">。由于它应该在每个屏幕尺寸上跨越 12 列，因此实际上没有必要为中小型断点定义列跨度。所以在这种情况下，它真的应该只是 <v-col cols="12"> - 将为您节省一点文件大小和加载时间。

无法验证 v-text-field [从旧版本的 Vuetify 迁移]

Can't validate v-text-field [migrating from older version of Vuetify]

html

javascript

vue.js

vuejs2

vuetify.js