如何从 Vue JS 方法打开 rails href 链接？答案

【问题标题】：How to open a rails href link from a Vue JS Method?如何从 Vue JS 方法打开 rails href 链接？
【发布时间】：2021-05-07 19:27:34
【问题描述】：

我正在开发一个 Rails/Vuejs 项目。我有一个带有 href 链接的按钮，可以打开 Stripe 模式。因为我在关闭主模式的同一个按钮上也有一个单击事件。问题：：/ href click 和 click 事件无法正常工作，有时付款模式无法打开，因为 click 事件接管了 href 链接。

我正在尝试在一个方法中组合所有操作并异步执行。

这就是我所拥有的。

<b-button @click="handleSubmit"><a href="/card/new" data-remote='true'>Payment</a></b-button>

在我的脚本标签中，这里是动作的其余部分。

handleSubmit() {
axios.post('/accommodations.json', {accommodation: this.accommodation})
    .then(response =>{
    if (response.status == 200) {
        this.$bvModal.hide('bv-modal-new_order');
        this.$emit('handleCreate');
   })
},

【问题讨论】：

标签： ruby-on-rails vue.js vuejs3

【解决方案1】：

您的b-button 和a 锚元素似乎在争夺点击。

如果您确定用户需要 javascript 才能使用该页面，我会说只是摆脱锚元素。

如果您绝对需要锚点，您也可以尝试使用修饰符，甚至 css 来防止点击操作转到子元素。

即：

<b-button @click.stop.capture="handleSubmit"><a href="/card/new" data-remote='true'>Payment</a></b-button>

【讨论】：