CODEWITHSUNDEEP
vue.js
user9348468
user9348468

Reputation:

Unable to disable click event of a span

I am trying to disable a span. My attempt is as below.

<span @click="confirm" disabled="true">click here</span>

But it will not disabled. Where I was wrong and how can I fix this?

Upvotes: 2

Views: 3568

Answers (1)

Arslan Butt
Arslan Butt

Reputation: 795

You can use css class to disable the span. If you want to make it dynamic simply use Class Binding eg :class="your_variable"

For Class and Style Bindings you can use this reference

vuejs.org/v2/guide/class-and-style.html#Object-Syntax Class and Style Bindings

const app = new Vue({
  methods: {
    confirm(){
    alert('hello');
    }
  }
})
app.$mount("#app")
.disable-click{
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Enable click</h2>
<span v-on:click="confirm()">Click</span>

<h2>Disable click</h2>
<span v-on:click="confirm()" class="disable-click">Disable Click</span>
</div>

Upvotes: 1

Related Questions