element ui组件 下拉框无法进行表单验证

一、举例组件代码

 
   
        
          
          
        
      
 
 
 export default {
  data() {
      return {
       	dataRule: {
           mealId: [
                {required: true, message: '餐品名称不能为空', trigger: 'blur'}
            ]
         }
       }
   },
 }

二、下拉框无法进行表单验证原因一

• prop属性的值与v-model属性中的值和dataRule：{}中的元素名都要保持一致， lz举例组件代码没有问题，正常情况都会验证成功。

三、下拉框无法进行表单验证原因二

• 注：(该原因是导致lz无法进行表单验证的真正原因)

• 再点击提交按钮时，需要在请求后端方法前加入下图中画红色框部分的代码，即可正常进行下拉框表单验证，如下图：