How to disable button in vuejs How to disable button in vuejs vue.js vue.js

How to disable button in vuejs


Just bind the disabled attribute to a boolean value like

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

as in this example


You can use a computed property to 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>


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

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

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