如何禁用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/

我试着这样.但如果我点击按钮添加,它就不会被禁用

我怎么解决这个问题？

Answer 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>

您也可以使用纯 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>

Answer 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" : ""
  }
}