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

Question

仓库地址：https://git.imooc.com/Ak17/Vue3zheye_Ak17

Answer 1

张轩 2023-06-07 10:32:33

同学你好

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

你在 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

  犯了低级错误，谢谢张老师

• Awesomeboy #2

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