How can I disable a link in the vue component?

Question

My html like this :

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

My javascript like this :

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

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

Demo and full code like this : https://jsfiddle.net/q7xcbuxd/221/

I try like that. But if I click button add, it's not disabled

How can I solve this problem?

Answer 1

Since you are using boostrap, the proper way to disable a (anchor) button is not to set .disabled = true, but to add a disabled class.

Two other notes. You probably want to prevent the default behavior of the click event, so use @click.prevent. Also, if you don't have additional arguments, you don't need to use ="add($event)", just ="add" will suffice.

Demo below:

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>

You can also go pure Vue and use a class binding:

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

Add an event to your element and preventDefault.

Then, add a custom css class that would grayed out the button and with disabled mouse cursor, and bind that class to your element.

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() would disable it.

and .prevent modifier allows you to add it easily

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