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

Question

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

如果 v-text-field 长度小于 3 或大于 50 个字符，我正在尝试验证 v-card 中的 v-text-field 以不保存记录。尽管我已经跟进了去年用来验证我的 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 等 3rd 方验证服务。会是什么呢？感谢您花时间阅读本文！

Answer 1

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

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

还有一个小费作为奖励：

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