VueJS: clicking disabled button still changes route

Question

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>

Did you debug that? What is the value of `this.currentPage`? — Marcos Pérez Gude, Apr 28 '17 at 12:24
you need the `function` keyword before `checkDisable`. Please look at the console. — phadaphunk, Apr 28 '17 at 12:28
Are you sure it is button that is "clickable" not `` from `router-link` — Yury Tarabanko, Apr 28 '17 at 12:30
Stop doing DOM manipulation. That's what Vue is for. [Use `v-bind` to set disabled](http://stackoverflow.com/a/38085541/392102). — Roy J, Apr 28 '17 at 12:31
Possible duplicate of [vue.js disable input conditionally](http://stackoverflow.com/questions/38085180/vue-js-disable-input-conditionally) — Roy J, Apr 28 '17 at 12:33

score 7 · Accepted Answer · answered Apr 28 '17 at 13:52

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>

score 0 · Answer 2 · edited Dec 26 '17 at 15:34

0

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;
    })

  }

}

edited Dec 26 '17 at 15:34

brenjt

15,997
13
77
118

answered Apr 28 '17 at 13:11

ShivamRajput

146
1
5

it still clickable – jdc Apr 28 '17 at 13:31

score 0 · Answer 3 · answered Dec 28 '17 at 16:55

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.

score 0 · Answer 4 · answered Oct 29 '18 at 17:09

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' })
  }
}

score 0 · Answer 5 · edited Oct 25 '19 at 01:06

0

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" });"

edited Oct 25 '19 at 01:06

Adriano

3,788
5
32
53

answered Oct 24 '19 at 22:23

Thiago Telles

11
5

score 0 · Answer 6 · answered Jan 09 '20 at 02:35

0

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"
>

answered Jan 09 '20 at 02:35

Alauddin Afif Cassandra

481
6
10

score -2 · Answer 7 · answered Apr 28 '17 at 12:42

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>

VueJS: clicking disabled button still changes route

7 Answers7