javascript - VueJS: clicking disabled button still changes route - Stack Overflow

admin管理员组

文章数量:1356413

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

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>

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

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>

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Apr 28, 2017 at 13:44 thanksd 55.7k2323 gold badges165165 silver badges154154 bronze badges asked Apr 28, 2017 at 12:22 jdcjdc 1511 gold badge22 silver badges55 bronze badges 6

• Did you debug that? What is the value of this.currentPage? – Marcos Pérez Gude Commented Apr 28, 2017 at 12:24
• you need the function keyword before checkDisable. Please look at the console. – phadaphunk Commented Apr 28, 2017 at 12:28
• value of this.currentPage is 1 – jdc Commented Apr 28, 2017 at 12:28
• 1 Stop doing DOM manipulation. That's what Vue is for. Use v-bind to set disabled. – Roy J Commented Apr 28, 2017 at 12:31
• 2 Possible duplicate of vue.js disable input conditionally – Roy J Commented Apr 28, 2017 at 12:33

 |  Show 1 more ment

7 Answers 7

Sorted by: Reset to default 7

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>

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

  }

}

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.

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

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

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

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>

本文标签： javascriptVueJS clicking disabled button still changes routeStack Overflow