vue-element的一些知识点和小坑_vue-element ref=-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45103475/article/details/108243739

这里可以包含了form表单大部分知识点，可以参考
https://cloud.tencent.com/developer/section/1489884

1、Vue定义的时候很常见的一个问题

vue is not defined

遇到这个问题基本上都是关于vue.js的引入的问题，首先要注意的是vue.js的位置一定要放在你所用到的页面的js前面

建议：

把vue.js放在页面的<head></head>里面，而该页面对应的js放在</body>后面，总之放在所有引用的js，css的最后面

2、VUE表单验证报错：

Error in v-on handler: “TypeError: Cannot read property ‘validate‘ of undefined“

refs和ref名字不一致：把refs和ref名字保持一致就行了，就像下面的“driver_information”

<el-form ref="driver_information" :rules="driver_information_rules" :model="driver_information">

this.$refs.driver_information.validate((valid) => {}

3、vue的定义

var vm = new Vue({
    el: '#lixinjian',
    data: function () {
        return {
            driver_information: {
                driver_id: '',
                driver_name: '',
                number_plate: '',
                createTime: '',
                car_type: '',
                operation_status: '',
                driver_phone: '',
                operating_cycle: '',
            },
            driver_information_rules:{
                driver_name: [{required:true,message:'请输入司机的名字',trigger:'blur'}],
                number_plate: [{required:true,message:'请输入车牌号',trigger:'blur'}],
                createTime: [{required:true,message:'请输入创建日期',trigger:'blur'}],
                car_type: [{required:true,message:'请输入车型级别',trigger:'blur'}],
                operation_status: [{required:true,message:'请输入运营状态',trigger:'blur'}],
                driver_phone: [{required:true,message:'请输入司机的手机号码',trigger:'blur'}],
                operating_cycle: [{required:true,message:'请输入运营周期',trigger:'blur'}],
            },

        }
    },
    methods: {
        saveMessage: function(information){
            this.$refs.driver_information.validate((valid) => {
                if (valid){
                    alert("验证通过了！");
                }else{
                    alert("验证没通过！");
                }

            })

        },
    },
})