CODEWITHSUNDEEP
javascriptfirebasevue.jsvuetify.js
Aditya
Aditya

Reputation: 171

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

Upvotes: 7

Views: 27690

Answers (5)

justthink
justthink

Reputation: 469

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

Upvotes: 0

Thomas
Thomas

Reputation: 726

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

Upvotes: 4

Hexodus
Hexodus

Reputation: 12945

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.

Upvotes: 1

Aditya
Aditya

Reputation: 171

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.

Upvotes: 10

Sergey Shapirenko
Sergey Shapirenko

Reputation: 165

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

Upvotes: 0

Related Questions