关于使用vue3 rules的一个新手bug问题

关于使用vue3 rules的一个新手bug问题

1. 上代码

             <el-form label-width="120px" class="xi-form" v-model="formStep" :rules="rules" ref="resetFormData">
               <!-- 数据接入 -->
               <div class="xiFormStep formStep1" v-show="active == 0">
                 <div >数据接入</div>
                 <el-form-item label="数据名称" prop="name">
                   <el-input v-model="formStep.name"></el-input>
                 </el-form-item>
     ​
                 <el-form-item label="简介" prop="remarks">
                   <el-input v-model="formStep.remarks"></el-input>
                 </el-form-item>
     ​
                 <el-form-item label="选择" prop="type">
                   <el-select v-model="formStep.type" placeholder="请选择" @change="changeSelect">
                     <el-option label="excel" value="excel" />
                     <el-option label="mysql" value="mysql" />
                     <el-option label="oracle" value="oracle" />
                   </el-select>
                 </el-form-item>

    

      const rules = reactive({
         name: [{ required: true, message: "请输入表单名称", trigger: "blur" }],
      });

   return {rules,}

 

2. bug描述 : rules可以生效,但是在失去焦点时,无论有没有 数据都报 "请输入表单名称";

   

   3. 总结: 找个很久没有找到原因.最后发现 问题出在一个小点上---> v-model 和:model 中;因为刚接触vue,很容易犯这种错误,现在记录一下这个问题;把v-model修改成:model即可

   4. v-model 和:model 的区别

      4.1 v-model:通常用于表单上双向数据的绑定，如果除了表单其他组件使用时，起不到任何效果。它还可以实现子组件到父组件的双向数据动态绑定。

      4.2 :model

      :model是v-bind:model的缩写。

      只是将父组件的值传递给和子组件，但是并未实现子组件 和父组件之间的双向数据绑定，当然引用类型除外，子组件改变了引用类型的数据的话，父组件的数据也会跟着改变。