VueJS表单不提交从电话，但工作在浏览器

Question

我以前见过有人问这类问题，但我一直没能找到合适的答案。

我有一个VueJS应用程序，其中提交功能可以从浏览器(Chrome, Firefox等)正常工作，但不能从手机(与Safari测试)提交。

我在组件内的提交方法是这样的:

methods: {
async removeBet(item) {
this.bet.id = item
try {
await this.$http.post("/user/deletePendingBet", this.bet);
} catch (err) {
console.log(err)
}
},
}

我这样调用这个方法:

<a class="dropdown-item" @click="removeBet(value._id)" href="/newBet">Delete</a>

我认为不需要DB查询，因为这与方法调用的方式有关。

我没有移动开发的经验，所以我的问题是Safari只接受以某种方式提交的表单吗?在这种情况下，使用Vue等JS框架提交表单的正确方式是什么?

Answer 1

首先，你正在使用锚标记，这不是一个好的做法。

因为你没有阻止浏览器调用你的@click，所以由于这个它不会调用@click，因为浏览器会坚持它的默认行为，并调用href。

我会建议将其更改为<div>或<span>，但可能是使用<a>的要求，因此要解决这个问题，首先要删除href，然后使用@click.prevent="remove..."使其工作。它将阻止<a>的默认行为，并将调用@click。

注意@click之后的.prevent。你可以在这里阅读更多。