[Vue warn]: Property or method “rules“ is not defined

原创已于 2023-12-08 15:29:13 修改 · 531 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-11-19 16:19:51 首次发布

本文介绍了一个Vue.js项目中关于表单验证规则的问题及解决办法。原先的表单缺少了必要的验证规则设置，导致运行时出现警告。通过在data选项中定义验证规则，解决了这一问题，并确保了表单字段如图书类别和图书名称等能够正确进行验证。

图片内容太小，如下：

vue.js:1193

[Vue warn]: Property or method "rules" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

发现：

rules 这个没有定义

原来：

 data:{
				dataList: [],//当前页要展示的分页列表数据
                formData: {},//表单数据
                dialogFormVisible: false,//增加表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                pagination: {},//分页模型数据，暂时弃用
            },

改正后：

    data:{
				dataList: [],//当前页要展示的分页列表数据
                formData: {},//表单数据
                dialogFormVisible: false,//增加表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                pagination: {},//分页模型数据，暂时弃用
                rules:{//校验规则
                    type:[{required:true,message:'图书类别为必填项',trigger:'blur'}],
                    name:[{required:true,message:'图书名称为必填项',trigger:'blur'}],
                    

                }
            },