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

【问题标题】：How can I disable a link in the vue component?如何禁用 vue 组件中的链接？
【发布时间】：2018-09-05 08:16:14
【问题描述】：

我的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/

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

我该如何解决这个问题？

【问题讨论】：

标签： javascript vue.js hyperlink vuejs2 vue-component

【解决方案1】：

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

另外两个笔记。您可能希望阻止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>

你也可以去 pure 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>

【讨论】：

我想问。如果像这样禁用类：event.target.className += ' disabled'。如果我想启用按钮怎么办？
你会做event.target.className = event.target.className.replace(/\disabled\b/g, "");。如果你可以放弃 IE（或者如果你可以添加 polyfill），也许使用 classList 是一个更干净的选择：element.classList.add("disabled"); 和 element.classList.remove("disabled");

【解决方案2】：

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

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

CSS：

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

HTML：

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

JS：

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

【讨论】：

【解决方案3】：

event.preventDefault() 会禁用它。

和.prevent修饰符让你可以轻松添加它

@click.prevent="add($event)"

【讨论】：