vue axios请求接口,status显示为canceled

现象

当使用el-form时,若表单中只有一个el-input表单元素,当回车时就会发生表单的自动提交,现象为浏览器刷新,如下代码

<el-form>
  <el-form-item label="付款码">
     <el-input ref="isfocus" :disabled="payType != 1"  placeholder="请输入付款码"  v-model="pay_code"></el-input>
  </el-form-item>
</el-form>

以上代码代码,当输入框输入数据后回车就会自动刷新浏览器。

原因

当表单中只有一个表单元素时,回车时表单就会默认提交。

没有阻止button的默认事件,导致表单提交到空地址,页面刷新

解决方案

阻止默认提交时间

<el-form @submit.native.prevent>

如果 el-inout 还需要使用回车事件触发可以使用下面的方式

@keyup.enter.native
上一篇
下一篇