Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue warns me Cannot set reactive property on undefined, null, or primitive value: null

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 


like image 405
Aditya Avatar asked May 06 '19 11:05

Aditya


People also ask

How to create reactive properties in Vue?

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.

Can definereactive call be reached with undefined properties?

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.

Why is my Vue data object not updating?

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:

How do I assign multiple properties to an object in Vue?

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.


2 Answers

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",
    }
}
like image 37
Thomas Avatar answered Oct 25 '22 09:10

Thomas


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.

like image 194
Aditya Avatar answered Oct 25 '22 08:10

Aditya