CODEWITHSUNDEEP
javascriptvue.jsvuejs2
jdc
jdc

Reputation: 15

VueJS: clicking disabled button still changes route

I'm trying to disable a button when currentpage is firstpage:

enter image description here

The button disables correctly but the route still changes when it is clicked.

javascript 

checkDisable() {
  if (this.currentPage==1) {
    document.getElementById("previousBtn").disabled = true;
  }
}

vue js

<router-link :to="{ name: 'products', params: {page: currentPage-1 }}">
   <button id="previousBtn" class="btn btn-default" v-bind="checkDisable()">
     Previous
   </button>
</router-link>

Upvotes: 1

Views: 14302

Answers (7)

Alauddin Afif Cassandra
Alauddin Afif Cassandra

Reputation: 578

you can follow this code, i hope can help somemany people.

<router-link
   :to="btn.back.disabled ? '' : '/dashboard'"
   type="button"
   class="btn btn-secondary mr-2"
>

Upvotes: 0

Thiago Telles
Thiago Telles

Reputation: 21

Create a data disabled that's true when the button is disabled:

data() {
    return {
       disabled: true
    }
}

Now the click only change the route when disabled == false:

@click="disabled ? null : this.$router.push({ name: "mypage" });"

Upvotes: 0

Erin Hales
Erin Hales

Reputation: 3

I had this same problem. I had to get rid of the router-link and add a method that programmatically changed the route.

<button id="previousBtn" class="btn btn-default" @click="changeRoute"> Previous </button>

methods: {
  changeRoute () {
    this.$router.push({ name: 'name-of-route' })
  }
}

Upvotes: 0

Francis Leigh
Francis Leigh

Reputation: 1960

Your button is wrapped in a router-link this is essentially an anchor tag... If your button is disabled - it is still wrapped in a router-link

Isn't the anchor (router-link) still going to be the target of your click?

Also best to use :disabled as an attribute instead of manipulating/querying the DOM.

<button :disabled="shouldBeDisabled"></button> Maybe look further into vue-router you may be able to disable the router-link attribute similar to the button. (granted disabled button is proabable being styled...) so do both...

I know that there is an attribute you can pass to a router-link called exact which evaluates to true if the route is consistent with the route the router-link 'links to.

You could check for the exact property maybe? this could eliminate the need for the currentPage check

You could pass a class of .button to your router-link and style it up like a button... this would eliminate the need for the use of a button that is behaving like an anchor.

Upvotes: 0

ShivamRajput
ShivamRajput

Reputation: 166

The problem is not in your code. Basically the button is disabled or non-clickable, it is clickable by the tag. So you just need to non-clickable to this as simply like this:

checkDisable() {
if (this.currentPage==1) {
     var obj  = document.getElementById("previousBtn");
     obj.disabled = true;
     obj.parentElement.addEventListener("click", function(e){
     event.preventDefault();
     return false;
    })

  }

}

Upvotes: 0

thanksd
thanksd

Reputation: 55634

You are not using v-bind correctly. It would be simplest to add a disabled attribute to your button and bind it to an inline function that simply returns true if the value of currentPage is 1: 

<button class="btn btn-default" :disabled="currentPage == 1">
  Previous
</button>

Upvotes: 7

Pooja K.
Pooja K.

Reputation: 97

Try this JS:

checkDisable() {
if (this.currentPage-1) {
return true;
}
}

vue js:

<router-link :to="{ name: 'products', params: {page: currentPage-1 }}">
<button id="previousBtn" class="btn btn-default" disabled="checkDisable()">
Previous
</button>
</router-link>

Upvotes: -2

Related Questions