vue3 表单验证规则不生效 resetFields

最新推荐文章于 2024-10-11 21:07:47 发布

原创最新推荐文章于 2024-10-11 21:07:47 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #前端框架

vue3.0 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了在Vue.js应用中，如何处理编辑对话框的数据清空问题。当关闭dialog时，通过调用`close`函数并利用`nextTick`配合`resetFields`方法有效地清空表单数据，解决了传统赋值为空无效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：本人遇到这个问题是因为编辑对话框之后要清空里面得数据，但是使用传统得赋值为空是不起效果的，结合对话框的close事件清空。话不多说，上代码

  <!-- 新增弹出框 --> 
  <el-dialog v-model="state.dialogFormVisible" :title="state.title" @close="close">
    <el-form
      ref="ruleFormRef"
      :model="state.form"
      label="label position"
      label-width="130px"
      :rules="state.rules"
    >
      <el-form-item label="项目主审人账号" :label-width="formLabelWidth">
        <el-input v-model="state.userName" autocomplete="off" @blur="loseBlur" />
      </el-form-item>
    </el-form>
  </el-dialog>

<script setup>
 
// 编辑按钮事件 要放在nextTick里面 赋值的时候
function handleClick(value) {
  state.title = '编辑'
  state.dialogFormVisible = true
  const forms = state.form
  nextTick(() => {
    Object.keys(state.form).forEach((key) => {
      forms[key] = value[key]
      // console.log(forms[key], value);
    })
  })
}


// 弹出窗清空赋值
function close() {
  if (!ruleFormRef.value) return
  ruleFormRef.value.resetFields()
}

</script>