如何禁用 vue 组件中的链接？

Question

我的 html 是这样的：

 <div id="app">
    <a class="btn btn-danger" href="javascript:" @click="add($event)">add</a>
</div>

我的 javascript 是这样的：

 var vue = new Vue({
    el: '#app',

    methods: {
        add(event) {
            event.target.disabled = true
        }
    }
});

演示和完整代码如下： https ://jsfiddle.net/q7xcbuxd/221/

我尝试那样。但是如果我点击按钮添加，它不会被禁用

我怎么解决这个问题？

原文由 moses toh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于您使用的是 boostrap，因此禁用（锚定）按钮的正确方法不是设置 .disabled = true ，而是 添加 disabled class 。

另外两个笔记。您可能想阻止 click 事件的默认行为，因此请使用 @click.prevent 。此外，如果您没有其他参数，则无需使用 ="add($event)" ，只需 ="add" 就足够了。

演示如下：

 new Vue({
  el: '#app',
  methods: {
    add(event) {
      event.target.className += ' disabled'
    }
  }
})

 body { padding: 10px }

 <script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="app">
  <a class="btn btn-danger" href="javascript:" @click.prevent="add">add</a>
</div>

你也可以使用 纯 Vue 并使用类绑定：

 new Vue({
  el: '#app',
  data: {
    btnDisabled: false
  },
  methods: {
    add(event) {
      this.btnDisabled = true; // mutate data and let vue disable the element
    }
  }
})

 body { padding: 10px }

 <script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="app">
  <a class="btn btn-danger" href="javascript:" @click.prevent="add" :class="{disabled: btnDisabled}">add</a>
</div>

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

向您的元素添加一个事件并防止默认。

然后，添加一个自定义 css 类，使按钮变灰并禁用鼠标光标，并将该类绑定到您的元素。

CSS：

 .disabled {
  cursor: not-allowed;
  color: gray
}

HTML:

 <a href=""  @click.prevent="add" :class="disabledClass" >Add</a>

记者：

 computed: {
  disabledClass: () => {
    return isAddButtonDisabled ? "disabled" : ""
  }
}

原文由 Elpedio Jr. Adoptante 发布，翻译遵循 CC BY-SA 3.0 许可协议