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
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>
We disable the element using property disabled and value is boolean which we can set using computation or directly into the property value. Like:
<button class="btn" :disabled="computedCondition">Next</button>
computed: {
computedCondition() {
return true or false;
}
}
we just use disabled and can use computed if we need flexible outcome which is dependent on other data.
Hope this helps. Have a good day.
https://v2.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
This code work for me.
Button:-
<button
id="myBtn"
@click="pay()"
class="btn btn-primary"
:disabled="!isComplete"
>
Pay ${{ this.amount }}
</button>
In computed (I check if my properties are empty or not if all are filled, I returned TRUE that results in ENABLE button )
isComplete () {
return (
this.user_name != '' &&
this.email != '' &&
this.phone != '' &&
this.address != ''
)
}
And Finally, use the following CSS
#myBtn:disabled {
cursor: not-allowed;
opacity: 0.8;
}
if you don't want to use a computed property, you can directly write your condition in the html attribute "disabled" with " v-bind " or just " : ".
<button class="btn btn-primary" @click="add(item)" v-bind:disabled="item.amount >= 3">
Add
</button>
