javascript - vue3中input输入莫名其妙调用发请求，怎么解决？

Question

问题描述

大佬们，这是一个新增的弹窗handleConfirmClick方法调用了一个提交接口，第一次提交是正常的。但是之后再打开这个弹窗时我只要在input上输入就会自动调用新增的请求也没走handleConfirmClick。这是为什么啊？

问题出现的环境背景及自己尝试过哪些方法

vue3、nuxtjs

相关代码

    <el-dialog :title="dialogDetail.title" v-model="dialogDetail.visable" width="540" center draggable align-center append-to-body >      <template #default>        <el-form ref="formRef" :model="form" label-width="120px">          <el-form-item label="项目名称" prop="title" :rules="[{ required: true, message: '请输入项目名称' }]">            <el-input v-model="form.title" />          </el-form-item>        </el-form>      </template>      <template #footer>        <div class="dialog-footer">          <el-button @click="dialogDetail.visable = false">取消</el-button>          <el-button type="primary" @click="handleConfirmClick">            确认          </el-button>        </div>      </template>    </el-dialog>

你期待的结果是什么？实际看到的错误信息又是什么？

能正常使用

Answer 1

根据你提供的描述和代码，似乎你遇到的问题是在 Vue3 和 NuxtJS 环境中，使用 Element UI 的 el-dialog 和 el-input 组件时，输入框的输入会自动触发一个新增的请求，而这个请求并没有被你的 handleConfirmClick 方法所控制。

可能的原因有几个：

1. Vuex：如果你在 Vuex 中使用了类似监听变化的操作，那么当输入框的值变化时，可能会触发表单的提交动作。你可以检查 Vuex 的相关代码，看看是否有类似的操作。
2. 第三方库或插件：某些第三方库或插件可能会监听输入框的变化，并自动提交表单。你可以检查是否使用了这样的库或插件。
3. 浏览器自动填充：另一个可能的原因是浏览器自动填充功能。当用户在输入框中键入时，浏览器可能会自动填充表单并提交。你可以尝试清除浏览器的缓存和cookies，或者使用无痕浏览模式进行测试。
4. 其他代码：还有可能是其他你不小心引入的代码或者其他组件引起的。检查你的代码库，看看是否有其他可能引起问题的代码。

由于你提供的信息不够详细，以上只是一些可能的原因。如果你能提供更多关于问题的信息，例如你使用的第三方库或插件的名称，或者你的 Vuex 配置等，我可能能提供更具体的帮助。