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?
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>
event.target.className += ' disabled'. How if I want to enable button?
event.target.className = event.target.className.replace(/\disabled\b/g, "");. If you can ditch IE (or if you can add a polyfill), maybe using classList is a cleaner alternative: element.classList.add("disabled"); and element.classList.remove("disabled");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" : ""
}
}
event.preventDefault() would disable it.
and .prevent modifier allows you to add it easily
@click.prevent="add($event)"
