How can I disable a link in the vue component?

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

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>