Vue 警告我无法在未定义、null 或原始值上设置反应属性：null

Posted 2023-02-22

【中文标题】Vue 警告我无法在未定义、null 或原始值上设置反应属性：null

【英文标题】：Vue warns me Cannot set reactive property on undefined, null, or primitive value: null

【发布时间】：2019-09-24 00:33:46

【问题描述】：

在从Firebase 获取数据时，我试图将获得的object 的properties 设置到UI，但是当我尝试对数据进行任何更改时，它会抛出这个错误。 v-on 处理程序中的错误：“TypeError：无法使用 'in' 运算符在 null 中搜索 'cc'。

我在开发模式下使用 Vue，以及 Firebase。有什么我遗漏的概念吗？

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;

当我这样做时

console.log(this.name)

在created() 中显示未定义，任何更改或更新的尝试也会出错

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 

【参考方案1】：

简单的解决方案：在您使用 v-for 的地方为您的数据集添加 v-if 检查。也许您需要template 来执行此操作。

【讨论】：

问题是我能够检索数据并将其显示在我的文本字段中，但是当我尝试对其进行任何更改时。每次击键都会弹出上述警告，对于选择也是如此。我不能忽略警告，因为它没有更新我的数据。

【参考方案2】：

我发现了哪里出错了，在我的模板v-model 中，我使用了this.school、this.name、this.cc，这导致了警告的出现，但我仍然不清楚工作。如果有人向我指出正确的资源，我想知道。

【参考方案3】：

我遇到了同样的问题，但在不同的地方，我尝试this.userDialogVisible（错误）而不是userDialogVisible（正确）：

<el-dialog
  title="Create a user"
  :visible.sync="userDialogVisible"
  :show-close="false"
  >
  <!--      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>

错误是“TypeError: Cannot use 'in' operator to search 'userDialogVisible' in null”。

这是因为this.userDialogVisible 在beforeCreate 阶段引用了一个全局属性，在该阶段它为空。但它会由您在created 阶段分配给它的值填充。

因此，如果在beforeCreate 阶段访问this.xxx、this.$xxx 或this.Ωxxx，Vue.js 将仅尝试引用名为xxx 的全局属性。

在您的情况下，从后端服务器（firebase 等）获取的任何数据都应该在 created 或 mounted 之类的地方完成，而不是在 beforeCreate 中完成，除非您明确想要处理全局属性.

我认为您不能通过在beforeCreate 阶段使用this.xxx 来引用data() 中定义的任何本地属性。

Reference

【参考方案4】：

另一种更奇特的情况是，当您的数据函数放置在多个脚本之间共享的混合中时，其中一个脚本没有定义数据属性，即shool - 那么您将收到相同的错误。

【参考方案5】：

我在尝试在 v-model 中设置数据时遇到了同样的错误。我的设置如下：

<template>
      <v-text-field
        v-model="this.myVariable"
        :readonly="false"
        :disabled="false"
        persistent-hint
        outlined
      ></v-text-field>
</template>

data() 
    return 
      myVariable: "1",
    

这没有更新 myVariable，因为设置 v-model 的行上的 this 关键字。更改为以下内容为我解决了错误：

<template>
      <v-text-field
        v-model="myVariable"
        :readonly="false"
        :disabled="false"
        persistent-hint
        outlined
      ></v-text-field>
</template>

data() 
    return 
      myVariable: "1",