I am currently experiencing an issue with VUE 3 Vuelidate. In my project, I have 2 components that each use Vuelidate for validation (specifically a list with CRUD functionality implemented using modals). However, when I navigate from one component to another and open a modal, I encounter errors such as:
Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at sortValidations (index.esm.js:88)
at setValidations (index.esm.js:494)
at index.esm.js:694
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:819)
at Proxy.options.computed.$v (index.esm.js:700)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:819)
at Object.get [as $v] (runtime-core.esm-bundler.js:5611)
The structure of my 2 components is similar to the basic Vuelidate example:
<script>
export default {
data(){ },
validations() { }
}
</script>
Upon inspecting the code, I noticed that the validation model was empty at the setValidations() function. It appears that the validation data from the first component is being carried over to the second one instead of creating a new instance. Is this a possible explanation for the issue?
Additionally, I came across the "VuelidateMixin" option which supposedly applies all Vuelidate functionalities to dedicated components via a mixin. Unfortunately, implementing this did not resolve the problem in my situation.