While fetching data from Firebase
I am trying to set the properties
of the object
obtained to the UI, but when I try and set any changes to the data, it throws me this error.
Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'cc' in null.
I am using Vue in development mode, along with Firebase
.Is there any concept I am missing out on?
beforeCreate(){
sref.get().then(sc => {
if (sc.exists) {
console.log(sc.data()); //this logs in the correct data
this.school = sc.data(); //this too
this.cc = sc.data().cc; //also this
this.name = sc.data().name;
When I do
console.log(this.name)
In created()
it displays undefined, any attempt to change or update also gives an error
Vue warn]: Cannot set reactive property on undefined, null, or primitive value: null
[Vue warn]: Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'cc' in null"
found in
---> <VSelect>
<VForm>
<VCard>
TypeError: Cannot use 'in' operator to search for 'cc' in null
at Proxy.set
Since Vue does not allow creating new root-level elements, there are ways to create your own reactive properties after Vue has been initialized which we’ll be looking at now In order for this to work, the reactive property being created has to be set on an existing property on the data option in Vue.
if (key in target && ...) It is truthy for properties declared as 'undefined' in object prototype, even if these are not set explicitely on the object! Therefore the defineReactive call can never be reached.
This is because Vue modifies every property in the data object on initialization so when the properties change, Vue is notified of the changes. If there’s a template element referencing b, there will be an error in the console:
You can use Object.assign () if you’ll be adding more than one property on the existing object. The reason we created a new object with new properties and old ones is so Vue will run through all properties now and make them reactive. If we only added new properties to the object, Vue would not be aware.
I had the same error attempting to set data in the v-model. My setup was as follows:
<template>
<v-text-field
v-model="this.myVariable"
:readonly="false"
:disabled="false"
persistent-hint
outlined
></v-text-field>
</template>
data() {
return {
myVariable: "1",
}
}
This was not updating myVariable
because of the this
keyword on the line setting the v-model. Changing to the following resolved the errors for me:
<template>
<v-text-field
v-model="myVariable"
:readonly="false"
:disabled="false"
persistent-hint
outlined
></v-text-field>
</template>
data() {
return {
myVariable: "1",
}
}
I figured out where I went wrong there, in my template v-model
i was using this.school
, this.name
, this.cc
which was causing the warnings to come, but I am still not clear at the internals of the working. I would like if someone pointed me to the right resources.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With