VueJs 在处理异步函数时禁用锚点 link

Question

我的 list.vue 文件中有以下元素：

<a id="anchorLink"
    class="button is-primary is-fullwidth-mobile mb-sm"
    @click="functionA()">
    <span>Call Function A</span>
</a>

这是函数functionA

async functionA() {
  // do something
},

我只想禁用锚 link 直到 functionA 处理完成，然后只启用 link.

所以我尝试了所有这些选项来禁用它，但到目前为止没有运气：

选项 01:

async functionA() {
document.getElementById('anchorLink').disabled = true;
// do something
}

选项 02：使用 .prevent

<a id="anchorLink"
    class="button is-primary is-fullwidth-mobile mb-sm"
    @click.prevent="functionA()">
    <span>Call Function A</span>
</a>

选项 03：使用 v-on:click.prevent

    <a id="anchorLink"
    class="button is-primary is-fullwidth-mobile mb-sm"
    v-on:click.prevent="functionA()">
    <span>Call Function A</span>
</a>

当我尝试所有选项时，我没有收到任何控制台错误，但它仍然无法完成工作。

有人可以帮我解决这个问题吗？

Answer 1

考虑您提供的代码。据我了解你的问题，你可以通过分配动态 classes 来禁用 <a> link，方法是将其绑定到 class 的数据属性，例如 [=14] =] 到您的 anchor 标签。对 <a> 标签使用 object based class 语法，然后使用 boolean 值切换 class 名称。

注意： Link在禁用阶段会变成red颜色，当函数执行完成后会变回原来的颜色原色。当它是红色时，您将无法执行 functionA()

TEST IT HERE

你的 vue 标记

<template>
 <div id="app">
 <a id="anchorLink"
  :class="{ isDisabled: !call }"
  @click="functionA">
  <span>Call Function A</span>
 </a>
 </div> 
</template>

Vue Class

export default {
 name: 'App',
 data: () => ({
   call: true
 }),
 methods: {
  async functionA(){
   if (this.call) {
    this.call = false;
    console.log('running function')
    setTimeout(()=> {
      this.call = true // mimic function execution behaviour using setTimeout here
    }, 2000)
   }
  }
 }
}

CSS

pointer-events 属性定义元素是否对指针事件作出反应。不需要添加，但您可以包含它。

.isDisabled {
  pointer-events: none;
  color: red
}

希望对您有所帮助！

Answer 2

很难具体回答您的问题（您的代码示例不完整）。

无论如何，这是 +- "hello world" 的想法（等待 Promise 而不是做某事）。

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: () => ({
    terms: true
  }),
  computed: {
    isDisabled: function(){
      return !this.terms;
    }
  },
  methods: {
    async disable_for_2_seconds() {
      try {
        this.terms = !this.terms;
        const msg = await hello_Promise();
        this.terms = !this.terms;
        console.log('Message:', msg);
      } catch(error){
        console.error(error);
      }
    },
  },
})

function hello_Promise() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Function A - Time Ends! Enable button');
    }, 2000);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h3>Async/Await</h3>
  <button :disabled='isDisabled' v-on:click="disable_for_2_seconds">Disable Button for 2 seconds on click</button>
  <br>Disable: <b>{{isDisabled}}</b>
</div>

Disable/Enable 按钮相关 Whosebug 问：

相关 JS 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

VueJs 在处理异步函数时禁用锚点 link

VueJs Disable anchor link while processing an async function

javascript

disable-link

vue.js