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，因此禁用（锚点）按钮的正确方法不是设置xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status== 200) { //put some logic, for example: alert('All good! ' + xmlhttp.responseText); } }，而是添加.disabled = true类。

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

演示如下：

="add"

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

body { padding: 10px }

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

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

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

body { padding: 10px }

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

Answer 3

event.preventDefault（）会禁用它。

和.prevent修饰符可让您轻松添加

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

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

3 个答案: