提交文章跳转失败,麻烦老师帮我看看

来源:6-13 添加新建文章页面

阿康喜欢蓝色

2023-06-06

写回答

1回答

张轩

2023-06-07

同学你好

你出现这个问题的原因是:

你在 validateForm 中,提交事件是添加到slot包含的一个按钮上面的

<slot name="submit">
    <button type="submit" class="btn btn-primary" @click.prevent="submitForm">
    提交
    </button>
</slot>
// 但是你在使用的时候,直接覆盖了这个按钮
<template #submit>
    <button class="btn btn-primary btn-large">发表文章</button>
</template>
// 这样就导致这个表单成了一个普通表单,没有 prevent,也没有对应的 submitForm 事件。

所以解决方案是将事件提到上面的 div 上面来
<div class="submit-area" @click.prevent="submitForm">

这样就可以了,亲测有效~

1
2
Awesomeboy
老师,但是虽然解决了可以触发这个事件,但是父级div的范围如果大于button的范围,那么点击Button之外包含在div的位置也就会触发这个事件,那意思是必须要让这个button 100%占满这个div父级盒子才可以不出现这个问题,还有其它办法解决吗,这里放不了图片,有点不好说明
2023-09-11
共2条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程