element-plus点击重置表单,却没有进行重置操作

html 复制代码
<script lang="ts" setup>
import {useCreateTask} from "./Create.ts";

const useCreate = useCreateTask()
const createTaskFormRef = useCreate.createTaskFormRef
const resetForm = (form: any) => {
  useCreate.resetForm(form)
}

import {useCreateProduct} from "./DialogCreate.ts";

const useProduct = useCreateProduct()
const createFormRef = useProduct.createFormRef
const resetFormProduct = (form: any) => {
  useProduct.resetForm(form)
}
</script>

<template>
  <el-form ref="createTaskFormRef" :model="useCreate.createTaskForm" label-width="auto"
           style="max-width: 600px">
    <el-form-item label="软件版本">
      <el-input v-model="useCreate.createTaskForm.softwareVersion" placeholder="请输入软件版本"/>
    </el-form-item>
  </el-form>
  <el-button @click="resetForm(createTaskFormRef)">重置数据</el-button>

  <el-form ref="createFormRef" :model="useProduct.createForm" label-width="auto"
           style="max-width: 600px">
    <el-form-item label="产品名称" prop="product_name">
      <el-input v-model="useProduct.createForm.product_name" placeholder="请输入软件版本"/>
    </el-form-item>
  </el-form>
  <el-button class="reset-button" @click="resetFormProduct(createFormRef)">重置</el-button>
</template>

<style scoped>

</style>

注意,这里重置产品名称是可以成功的,而重置数据却不能成功,原因是需要prop="product_name"作为字段唯一标识符

相关推荐
快起来别睡了5 分钟前
看完你就知道JavaScript 中的对象创建与继承方式原来这么简单?!
javascript
乌兰麦朵15 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai15 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
流星稍逝19 分钟前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
OEC小胖胖23 分钟前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
断竿散人30 分钟前
JavaScript 错误对象完全指南:内置类型解析与自定义异常实战
前端·javascript
默默地离开32 分钟前
Blob二进制处理的王者
前端·javascript·html
今禾44 分钟前
深入理解 JavaScript 事件监听机制
前端·javascript
FogLetter44 分钟前
从饼干到Cookie:前端存储的身份密码本
前端·javascript
Mintopia1 小时前
LOD:图形世界里的 “看人下菜碟” 艺术
前端·javascript·计算机图形学