For experimental purposes, I have created a simple form and am trying to implement a feature where the button remains disabled until the original form data is changed. Additionally, I want to ensure that the button stays disabled even if the changed data is reverted back to the original data (undo).
<template lang="pug">
form(@click.prevent="save")
.main
input(v-model="user.name")
input(v-model="user.email")
input(v-model="user.age")
select(v-model="user.sex")
option Male
option Female
.footer
button(:disabled="isFormEnable") Save
</template>
<script>
export default {
name: 'userForm',
data () {
return {
user: {
name: 'John Doe',
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed87828583ad8a">[email protected]</a>',
age: '35',
sex: 'Male',
}
}
},
computed: {
isFormEnable () {
// I am not sure what I need to do here but something like this may be:
if (user.name) { return true }
}
},
methods: {
save () {
console.log('Form Submitted')
}
}
}
</script>
Although I came across a jQuery solution here, I am specifically looking for a vanilla/ Vue.js solution.
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this)
.find('input:submit, button:submit')
.prop('disabled', $(this).serialize() == $(this).data('serialized'))
;
})
.find('input:submit, button:submit')
.prop('disabled', true)
;