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

Question

我在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>

Answer 1

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

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

Answer 2

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

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

  }

}

Answer 3

您的按钮包含在router-link这基本上是anchor标记...如果您的按钮被禁用 - 它仍然包含在router-link

中

anchor (router-link)仍然是您点击的目标吗？

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

<button :disabled="shouldBeDisabled"></button> 也许进一步了解vue-router您可能能够禁用类似于按钮的router-link属性。 （授予禁用按钮可以被设置为样式...）所以两者都是......

我知道有一个属性可以传递给名为exact的router-link，如果路由与router-link＆＃39;链接到的路由一致，则会将其评估为true。

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

的需要

您可以将.button类传递给router-link并将其设置为按钮...这样就无需使用行为类似button的{​​{1}} anchor。

Answer 4

我有同样的问题。我必须摆脱路由器链接，并添加一种以编程方式更改路由的方法。

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

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

Answer 5

在禁用按钮后创建disabled数据true：

data() {
    return {
       disabled: true
    }
}

现在，点击仅在disabled == false时更改路线：

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

Answer 6

您可以遵循此代码，希望对很多人有帮助。

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

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