[Component] nuxt3使用elementplus form组件提交完一次后在el-input里输入多少次字符就自动请求多少次接口

[moonwaystudio]

Bug Type: Component

Environment

• Vue Version: 3.4.21
• Element Plus Version: 2.7.1
• Browser / OS: chrome 124.0.6367.119 / macos 13.6.6
• Build Tool: Vite

Reproduction

Related Component

• el-form
• el-form-item
• el-input
• el-tabs

Reproduction Link

Link

Steps to reproduce

  <el-tabs type="border-card" class="demo-tabs">
    <el-tab-pane>
      <template #label>
    <span class="custom-tabs-label">
      <Icon name="material-symbols:add-notes-outline"/>
      <span> 需求反馈</span>
    </span>
      </template>
      <el-form ref="formRef" :model="formState" label-width="auto"
               :rules="rules">
        <el-form-item label="软件名称" prop="name">
          <el-input v-model="formState.name"/>
        </el-form-item>
        <el-form-item label="软件版本" prop="version">
          <el-input v-model="formState.version"/>
        </el-form-item>
        <el-form-item label="软件平台" prop="platform">
          <el-select v-model="formState.platform" placeholder="请选择软件平台">
            <el-option label="mac" value="1">mac</el-option>
            <el-option label="windows" value="2">windows</el-option>
            <el-option label="ios" value="3">ios</el-option>
            <el-option label="android" value="4">android</el-option>
            <el-option label="黑苹果" value="5">黑苹果</el-option>
            <el-option label="软件教程" value="6">软件教程</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="auto" type="primary" @click="onShow(formRef)">提交</el-button>
        </el-form-item>
      </el-form>
      <Vcode :show="isShow1" @success="onSuccess" @close="onClose"/>
    </el-tab-pane>
  </el-tabs>

<script setup> import {defineComponent, ref, reactive, onMounted, toRaw} from 'vue'; import Vcode from "vue3-puzzle-vcode"; import emitter from '@/utils/mitt'; import {feedback, faillink} from '@/utils/api'; const formRef = ref(null); const formRef1 = ref(null); const rules =reactive ({ name: [ { required: true, message: '请输入资源名称', trigger: 'blur', } ], version: [ { required: true, message: '请输入资源版本', trigger: 'blur', } ], platform: [{ required: true, message: '请选择软件平台', trigger: 'change', }] }); const rules1 = reactive({ faillink: [ { required: true, message: '请输入软件文章链接', trigger: 'blur', } ], }) const type = ref(0); const formState = reactive({ name: '', version: '', platform: undefined }); const formState1 = reactive({ faillink: '', }); const close = () => { isShow.value = false; } const isShow1 = ref(false); const onShow = (formEl) => { if (!formEl) return formEl.validate((valid, fields) => { if (valid) { isShow1.value = true; type.value = 1; } else { console.log('error submit!', fields) } }) }; const onShow1 = (formEl) => { if (!formEl) return formEl.validate((valid, fields) => { if (valid) { isShow1.value = true; type.value = 2; } else { console.log('error submit!', fields) } }) }; const onClose = () => { isShow1.value = false; }; const onSuccess = () => { onClose(); // 验证成功，需要手动关闭模态框 //console.log(11111); if (type.value == 1) { feedback(formState).then((response) => { if (response.status == 'done') { formRef.value.resetFields(); type.value=0; ElMessage({message:response.msg,type:'success'}); } else { ElMessage.error(response.msg); } }) } else if (type.value == 2) { faillink(formState1).then((response) => { if (response.status == 'done') { formRef1.value.resetFields(); type.value=0; ElMessage({message:response.msg,type:'success'}); } else { ElMessage.error(response.msg); } }) } }; </script> <style scoped lang="scss"> </style>

What is Expected?

提交完后再el-input里面输入字符不在自动请求接口

What is actually happening?

提交完后再el-input里面输入字符在自动请求接口，输多少请求多少

Additional comments

我用的是nuxt3"nuxt": "^3.11.2",
"vue": "^3.4.21",
"vue3-puzzle-vcode": "^1.1.2-nuxt"

[warmthsea]

https://github.com/element-plus/element-plus-nuxt

Are you using this?

[moonwaystudio]

https://github.com/element-plus/element-plus-nuxt

Are you using this?

yes

[moonwaystudio]

"@element-plus/nuxt": "^1.0.9"

[JiuRanYa]

Could you provide a mini reproduction？

[moonwaystudio]

我知道了是get请求才这样子，post没问题

[AhuiYuan]

@moonwaystudio 我的是post提交会这样子 也是nuxt3+E plus

[warmthsea]

可以提供具体细节吗，这样真的无法定位问题

[AhuiYuan]

Create Reset <script lang="ts" setup> import { reactive, ref } from 'vue' import type { ComponentSize, FormInstance, FormRules } from 'element-plus' import { postFeedback } from '~/composables/apis/config' const ruleFormRef = ref() const ruleForm:any = reactive({ name: '', email: '', desc: '', type: 7 }) const rules = reactive({ name: [ { required: true, message: 'Please input Activity name', trigger: 'change' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'change' }, ], email:[ { required: true, message: 'Please input email address', trigger: 'blur', }, { type: 'email', message: 'Please input correct email address', trigger: ['blur', 'change'], }, ], desc: [ { required: true, message: 'Please input activity form', trigger: 'blur' }, ], }) const submitForm = async (formEl: FormInstance | undefined) => { if (!formEl) { return } await formEl.validate((valid, fields) => { if (valid) { ruleForm.type = 7 postFeedback(ruleForm).then(() => { alert('111111111111111') }) } else { console.log('error submit!', fields) } }) } const resetForm = (formEl: FormInstance | undefined) => { if (!formEl) return formEl.resetFields() } </script>``

export const postFeedback = async (params: { name: string; type: string, desc: string, email: string,phone:string }) => {
const { data, refresh } = await useHttp.post('setFeedback', params)
return { data: data && data.value }
}

[AhuiYuan]

`
<el-form
ref="ruleFormRef"
style="max-width: 600px"
:model="ruleForm"
:rules="rules"
label-width="auto"
class="demo-ruleForm"

<el-form-item label="Activity name" prop="name">
  <el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="Activity name" prop="email">
  <el-input v-model="ruleForm.email" />
</el-form-item>
<el-form-item label="Activity form" prop="desc">
  <el-input v-model="ruleForm.desc" type="textarea" />
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="submitForm(ruleFormRef)">
    Create
  </el-button>
  <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>

`

[warmthsea]

其它控件或者原生 input 有这个问题么？
最好录个 gif 或者视频

[AhuiYuan]

我另外复制官方文档的例子，加了自己接口发送提交，试了也是一样。

[AhuiYuan]

发送成功后，再在表单里输入多少字符就请求接口多少次