Compare const with proxy object vue 3 lodash

Question

I'm trying to create a computed property in Vue 3 using composition API. The main purpose is to know if filter object has changed since the component has been mounted.

In order to accomplish that, I'm using lodash to compare the original const filterObj against the mutated const filter.

Since filter is a proxied object, I found that using toRaw removes the proxy wrapper, in fact if I do a console.log() both objects are equal.

For some reason, the computed property always returns false.

Please note this an extract of the whole component. The filter object is correctly being mutated by template inputs and dropdowns.

<script>
import { ref, computed, toRaw } from 'vue'
import _ from 'lodash'

const filterObj = {
  dateFrom: null,
  dateTo: null,
  category: null,
  createdBy: null,
  updatedBy: null
}

export default {
  setup() {
    
    const filter = ref(filterObj)

    const isFiltered = computed(() => !_.isEqual(toRaw(filter.value), filterObj))

    return {
      isFiltered
    }
  }
}
</script>

Edit: I found that doing const filter = ref(filterObj) is in fact making filterObj reactive. So any advice about any different approach on how to handle this will be appreciated

score 0 · Accepted Answer · answered Jul 22 '22 at 02:10

If as you say const filter = ref(filterObj) is in fact making filterObj reactive

May be this is what you need: What is the most efficient way to deep clone an object in JavaScript?

You can try something like this:

const filter = ref({...filterObj})

Notice:

If you want to define a reactive object ref vs reactive in Vue 3?

Compare const with proxy object vue 3 lodash

1 Answers1