laravel 如何在 vuejs 中禁用按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/54876820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 18:17:32  来源:igfitidea点击:

How to disable button in vuejs

laravelvue.js

提问by mohamed lahsoumi

I want to make the button disabled during the form filling when all the inputs are filled the button will be enabled using vuejs and on laravel framework

我想在填写所有输入时禁用按钮

I tried achive that by simply making the button disabled in the

我试图通过简单地在

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

but i didn't know how to do it in vuejs

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

回答by Roy J

Just bind the disabledattribute to a boolean value like

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

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

as in this example

这个例子中

回答by Tharaka Dilshan

You can use a computed propertyto make the button enable / disable. Each time the condition changes inside the computed property, the button disable or enable will be rendered. The condition should be a boolean.

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

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

回答by trueChazza

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

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

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

Bind the disabledattribute to a boolean value, once validated, or in your case all inputs are filled return true

disabled属性绑定到一个布尔值,一旦验证,或者在你的情况下,所有输入都被填充返回true