如何在 vuejs 中禁用按钮

Question

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

我尝试通过简单地在

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

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

原文由 mohamed lahsoumi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

如 本例所示

原文由 Roy J 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Tharaka Dilshan 发布，翻译遵循 CC BY-SA 4.0 许可协议