Javascript Can'；t验证v-text-field[从旧版本的Vuetify迁移]

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

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

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

组件中使用的代码如下所示

对于应在红色描述v文本字段下方弹出的验证消息：

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>

<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>

新的

JAVASCRIPT:

<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>

<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>

从“axios”导入axios
导出默认值{
数据（）{
返回{
类别：[]，
对话：错，
dialogDelete:false，
标题：[
{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}，
],
搜索：“”，
甜点：[]，
编辑索引：-1，
编辑：{
名称：“”，
卡路里：0，
脂肪：0，
碳水化合物：0，
蛋白质：0，
},
id:“”，
名称：“”，
说明：“”，
瓦利达:0,，
有效信息：[]
}
},
方法：{
保存（）{
if（this.valida（））{
返回；
}
如果（this.editedIndex>-1）{
//要更新的代码
} 
否则{
让我=这个；
axios.post（'api/Categories/Create'{
“name”：me.name，
“description”：me.description
}).然后（功能（响应）{
我。关闭（）；
me.list（）；
我是干净的；
}).catch（函数（错误）{
console.log（错误）；
});
}
},
瓦利达（）{
这个。valida=0；
this.validaMessage=[]；
if（this.name.length<3 | | this.name.length>50）{
this.validaMessage.push（“名称必须包含3到50个字符。”）
}
if（此.validMessage.length）{
这个。valida=1；
}
把这个还给我，瓦利达；
}
},  
}

在我的旧版本项目中，它通常是这样显示的：

---

我不知道Vuetify更新版本从2.2.11更改为2.4.0是否会影响在组件内部实现此方法以显示或隐藏验证消息的能力。我试图解决这个问题，以避免重复使用第三方验证服务，如vee validate或vuelidate。可能是什么？感谢您花时间阅读本文

总之，这些是错误的原因：

存在同名的数据属性和方法-

valida

v-btn

组件为

@click

事件提供了一个已删除的方法

initialize

还有一个额外的提示：

---

您有一个跨越12列的

v列：
。因为它应该在每个屏幕大小上跨越12列，所以实际上没有必要为中小型断点定义列跨度。因此，在这种情况下，它实际上应该只有
，这样可以节省一些文件大小和加载时间。
我注意到的第一件事是，您有一个数据属性
valida
和一个方法
valida
。您必须更改其中一个的名称。好的，我也注意到了这个错误，谢谢您指出！尽管现在没有显示方法错误，但它只显示前4个错误（而没有单击保存）。基本上，第一个错误表示您正在调用名为
initialize
的方法，但该方法未在组件类别中定义。第二个表示您正在对
v-btn
@click事件调用无效（不存在）的方法。但我在您提供的代码中没有看到对非的引用……这是因为我有一个“initialize”方法，正如您所提到的，我删除了之前在@click事件中引用的方法。我删除了它，并用我当前用于该按钮的方法替换它，它现在可以工作了。您可以发布相同的解决方案，以便我将其标记为答案。谢谢你的帮助！NP很高兴我能帮忙！把它贴出来作为答案，还有一个小苏