Disable input if value hasn't changed from cloneDeep of mapState

Question

I have a page where users can edit their settings. I want to disable the submit button if the user has not made any changes to the form but for some reason the button is always enabled. Any ideas?

pages/settings/_id.vue

</template>
    <b-button :disabled="userCopy == user">
        Continue
    </b-button>
</template>

<script>
import { mapState } from 'vuex'
import _ from 'lodash'

export default {
  data() {
    return {
      userCopy: { offers: {}, legal: {} }
    }
  },

  computed: {
    ...mapState({ user: (state) => state.users.user })
  },

  created() {
    this.$store
      .dispatch('users/fetchUser', this.$route.params.id)
      .then((response) => {
        this.userCopy = _.cloneDeep(response)
      })
  },
  
}
</script>

Answer 1

You are checking the equality between two objects, and that does not work.

eg

const obOne = {id:1,name:'mark'};
const obTwo = {id:1,name:'mark'};

return obOne == obTwo
//prints false

Is plenty of solution for this problem, like this on from here on stackOverflow

So you can solve by changing your logic to:

:disabled="JSON.stringify(userCopy ) === JSON.stringify(user)"

I would still suggest to check against the known values of the objects to see if they are different.