TutorialMeta
Ad

How Can I Disable A Link In The Vue Component?

- 1 answer

My html like this : 

<div id="app">
    <a class="btn btn-danger" target="_blank" rel="nofollow noreferrer" 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?

Ad

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" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="app">
  <a class="btn btn-danger" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="app">
  <a class="btn btn-danger" target="_blank" rel="nofollow noreferrer" href="javascript:" @click.prevent="add" :class="{disabled: btnDisabled}">add</a>
</div>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad