VueJS：单击禁用按钮仍会更改路线答案

【问题标题】：VueJS: clicking disabled button still changes routeVueJS：单击禁用按钮仍会更改路线
【发布时间】：2017-09-26 13:40:54
【问题描述】：

当currentpage 是firstpage 时，我正在尝试禁用按钮：

按钮正确禁用，但单击时路由仍会更改。

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>

【问题讨论】：

你调试了吗？ this.currentPage 的值是多少？
您需要在checkDisable 之前添加function 关键字。请看控制台。
this.currentPage 的值为 1
停止进行 DOM 操作。这就是 Vue 的用途。 Use v-bind to set disabled.
vue.js disable input conditionally的可能重复

标签： javascript vue.js vuejs2

【解决方案1】：

你可以按照这个代码，我希望可以帮助一些人。

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

【讨论】：

【解决方案2】：

当按钮被禁用时创建一个数据disabled，即true：

data() {
    return {
       disabled: true
    }
}

现在点击只在@987654324@时改变路由：

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

【讨论】：

【解决方案3】：

我遇到了同样的问题。我不得不摆脱路由器链接并添加一个以编程方式更改路由的方法。

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

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

【讨论】：

【解决方案4】：

您的按钮被包裹在 router-link 中，这实际上是一个 anchor 标记...如果您的按钮被禁用 - 它仍然包裹在 router-link 中

anchor (router-link) 不是仍将成为您点击的目标吗？

最好使用:disabled 作为属性，而不是操作/查询 DOM。

<button :disabled="shouldBeDisabled"></button> 也许进一步查看vue-router，您可能能够禁用类似于按钮的router-link 属性。（授予的禁用按钮很可能被设置样式...）两者都这样做...

我知道有一个属性可以传递给 router-link，如果该路由与 router-link 链接到的路由一致，则该属性的计算结果为 true。

您可以检查确切的属性吗？这可以消除对currentPage 检查的需要

您可以将 .button 的类传递给您的 router-link 并将其设置为像按钮一样...这将消除使用行为类似于 anchor 的 button 的需要。

【讨论】：

【解决方案5】：

问题不在您的代码中。基本上该按钮被禁用或不可点击，它可以被标签点击。所以你只需要像这样不可点击：

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

  }

}

【讨论】：

它仍然可以点击

【解决方案6】：

您没有正确使用v-bind。如果currentPage 的值为1，则将disabled 属性添加到按钮并将其绑定到仅返回true 的内联函数是最简单的：

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

【讨论】：

【解决方案7】：

试试这个 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>

【讨论】：