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 = sc.data();  //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 

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 = sc.data();  //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 

• javascript
• firebase
• vue.js
• vuetify.js

5 Answers 5

I figured out where I went wrong there, in my template v-model i was using this.school, this.name, this which was causing the warnings to e, but I am still not clear at the internals of the working. I would like if someone pointed me to the right resources.

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",
    }
}

One other more exotic case is, when your data function is placed inside of a mixin that is shared between multiple scripts where one of the scripts has no data property i.e. shool defined - then you'll recieve the same error.

Simple solution: add v-if check for your dataset, where you use v-for. Maybe you will need template to do this.

I got the same problem but in a different place, where I tried this.userDialogVisible (error) instead of userDialogVisible (correct):

<el-dialog
  title="Create a user"
  :visible.sync="userDialogVisible"
  :show-close="false"
  width="50%">
  <!--      dialog content-->
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="userDialogVisible=false">Confirm</el-button>
    <el-button @click="userDialogVisible=false">Cancel</el-button>
  </span>
</el-dialog>

The error is "TypeError: Cannot use 'in' operator to search for 'userDialogVisible' in null".

This is because this.userDialogVisible is referencing a global property at the beforeCreate stage, where it is null. but it is then populated by the value you assign to it at the created stage.

Thus, if this.xxx, this.$xxx or this.Ωxxx is being accessed at the beforeCreate stage, Vue.js will only try to reference a global property named xxx.

In your case, any data fetching from a backend server (firebase etc.) should be done in a place like created, or mounted, not in beforeCreate, unless you explicitly want to deal with global properties.

I do not think that you can reference any local properties defined in data() by using this.xxx at the beforeCreate stage.

Reference