I need help with a question, I am two trying to make a disabled save button be enabled when someone changes the form for two days, I realized today that the purchase I'm doing lodash is not working, whenever I change something in the form so much the oldForm variable as the form, are also changed, I've done everything and even so I couldn't enable the button.
Button component code in vuejs
<template>
<div
v-bind:class="isActive()"
class="flex w-max rounded text-xs">
<inertia-link class="py-2 px-6 uppercase" v-if="href" :href="href">
<slot></slot>
</inertia-link>
<button v-if="!href"
disabled="!changed"
class="py-2 px-6 uppercase" type="button">
<slot></slot>
</button>
</div>
</template>
<script>
import _ from 'lodash'
export default {
props: {
href: String,
active: {
type: Boolean,
default: true
},
form:{
type: Object
},
processing: {
type: Boolean,
default: false
}
},
data(){
return{
changed: false,
}
},
computed:{
oldForm(){
return this.form;
}
},
watch:{
oldForm(){
this.oldForm = _.cloneDeep(this.form)
},
form:{
handler(){
this.changed = !_.isEqual(this.form, this.oldForm)
console.log(this.form)
console.log(this.oldForm)
},
deep: true,
},
},
}
</script>
Calling the button on the form:
<submit-button
:processing="form.processing"
:form="form"
:active="isFormChanged" @click.native="save()">
<i class="fas fa-save"></i> Salvar
</submit-button>
With console.log, I found they were the same, how do I store one and compare with the other to enable the button?
I can only use VueJS and lodash to solve this.