没有类型的 vue-js 按钮元素 --> 提交答案

【问题标题】：vue-js button element with no type --> submit没有类型的 vue-js 按钮元素 --> 提交
【发布时间】：2020-07-26 03:04:46
【问题描述】：

我们在一个 vue-js (@vue-cli, Build version) 应用程序中遇到了一个非常奇怪的问题。 App.vue 中有一个按钮，有一个 onclick

<button @click="goIRList" id="irlistBtn">IR List</button>

这对某些用户每次都很好，而对其他用户则不然。对于其他人，我检查（通过警报）根本没有到达 goIRList 代码。这些其他人在我们尝试过的任何浏览器中都有这个问题。当 Vue+Developer Tools 打开时，他们确实没有遇到过这个问题——这让我更难调试它。

这些用户得到的不是 goIRList 代码，而是只有错误消息的页面

Cannot GET /menu.csp

这尤其令人困惑，因为 menu.csp 是来自完全不同系统的代码，尽管它也与同一台计算机相关联。它从不在 vue-js 应用程序中引用。
最终我意识到发生的事情是一个提交，即使按钮在页面上没有任何形式[我原以为按钮默认情况下只是一个提交类型，如果它在形式]。一旦我添加了一个类型

更新：现在问题又回来了，同样的条件：对他们来说而不是对我来说。没有改变。我还在按钮的 onclick 中添加了 .prevent：

没有帮助。所以也许这不是问题。无论如何，现在我要求修复和解释。谢谢！

【问题讨论】：

按钮是窗体的子元素吗？
不是我的。由于是 vue-js Build 版本，我真的不知道最后一页是什么。 vue-js 是否添加了“表单”包装器之类的？

标签： vue.js button form-submit

【解决方案1】：

在表单中添加“提交”事件捕获器，并阻止默认操作。

<template>
  <div id="app">
    <form @submit="submit">
      <input value="Tom">
      <button>Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    submit(e) {
      e.preventDefault();
      console.log("Success!");
    }
  }
};
</script>

【讨论】：

再次，只需添加按钮类型即可解决问题。我也可以按照您所说的方式阻止提交。我的问题是，为什么会这样？
查看帖子更新：问题又回来了，甚至带有 .prevent

【解决方案2】：

有人向我指出了答案。荒谬：这两个按钮隐藏在页面上方的徽标图像下方。这是包含虚假链接的图像。
我从来没有遇到过错误，因为我看不太清楚，所以我保持高尺寸，并且按钮远离徽标。其他人的页面尺寸更正常，除了那张图片，所有东西都变小了；图像的不可见边缘越过了按钮，有人试图点击按钮触发了链接。我将图像设置为随页面调整大小，一切都很好。

【讨论】：