Отключить ввод, если значение не изменилось с cloneDeep на mapState

Question

У меня есть страница, где пользователи могут редактировать свои настройки. Я хочу отключить кнопку отправки, если пользователь не внес никаких изменений в форму, но по какой-то причине кнопка всегда включена. Есть идеи?

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

Вы проверяете равенство между двумя объектами, и это не работает.

например,

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

return obOne == obTwo
//prints false

Есть много решений для этой проблемы, например, от здесь on stackOverflow

Таким образом, вы можете решить, изменив свой logi c на:

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

Я все же предлагаю проверить известные значения объектов, чтобы узнать, разные.