如何在 vuejs 中禁用按钮答案

【问题标题】：How to disable button in vuejs如何在 vuejs 中禁用按钮
【发布时间】：2019-07-19 11:36:30
【问题描述】：

我想在填写表单时禁用按钮当所有输入都填满时，将使用 vuejs 和 laravel 框架启用按钮

我尝试通过简单地在

中禁用按钮来实现这一点

<button type="submit" class="btn btn-info" disabled>Next</button>

但我不知道如何在 vuejs 中做到这一点

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

这段代码对我有用。

按钮：-

  <button
                id="myBtn"
                @click="pay()"
                class="btn btn-primary"
                :disabled="!isComplete"
              >
                Pay ${{ this.amount }}
              </button>

在计算中（我检查我的属性是否为空，如果全部填充，我返回 TRUE 导致 ENABLE 按钮）

  isComplete () {
      return (
        this.user_name != '' &&
        this.email != '' &&
        this.phone != '' &&
        this.address != ''
      )
    }

最后，使用下面的 CSS

#myBtn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

【讨论】：

【解决方案2】：

您可以使用计算属性来启用/禁用按钮。每次计算属性内的条件发生变化时，都会呈现按钮禁用或启用。条件应该是布尔值。

<template>
  ...
  <button type="submit" class="btn btn-info" :disabled="isDisabled">Next</button>
  ...
</template>

<script>
  export default {
    computed: {
      isDisabled() {
        // you can  check your form is filled or not here.
        return yourCondition == true
      },
    },
  }
</script>

【讨论】：

【解决方案3】：

https://vuejs.org/v2/guide/syntax.html#Attributes

<button type="submit" class="btn btn-info" :disabled="validated">Next</button>

将disabled 属性绑定到布尔值，一旦验证，或者在您的情况下，所有输入都已填充返回true

【讨论】：

【解决方案4】：

只需将disabled 属性绑定到布尔值，例如

<button :disabled='isDisabled'>Send Form</button>

如this example

【讨论】：