未捕获的类型错误：无法设置未定义的属性（设置“isSubcon”）

Posted 2023-02-22

【中文标题】未捕获的类型错误：无法设置未定义的属性（设置“isSubcon”）

【英文标题】：Uncaught TypeError: Cannot set properties of undefined (setting 'isSubcon')

【发布时间】：2022-01-01 13:19:19

【问题描述】：

在这里需要一些帮助。

我希望我的导航抽屉根据登录用户的用户类型/角色显示不同的内容。

但是我遇到了这个错误（“Uncaught TypeError: Cannot set properties of undefined (setting 'isSubcon'”)。而且我的导航抽屉没有显示任何东西。

我的template

<v-list v-if="isSubcon">
    //content of drawer if user that logged in is a "Subcon"
</v-list>

<v-list v-if="isWPC">
    //content of drawer if user that logged in is a "WPC"
</v-list>

<v-list v-if="isBWG">
    //content of drawer if user that logged in is a "BWG"
</v-list>

我的script

data: () => (
    isSubcon: false,
    isWPC: false,
    isBWG: false,
),

// I think below is where the problem occurs.
created() 
    firebase
        .auth()
        .onAuthStateChanged((userAuth) => 
            if (userAuth) 
                firebase
                    .auth()
                    .currentUser.getIdTokenResult()
                    .then(function (
                            claims,
                        ) 
                            if (claims.customer) 
                                this.isSubcon = true;  //HERE WHERE THE PROBLEM OCCURS (i think)
                             else if (claims.admin) 
                                this.isWPC =true;  //THIS ALSO
                             else if (claims.subscriber) 
                                this.isBWG = true;  //AND THIS ALSO
                            
                           
                        )
                
            );
    ,

我正在使用 Firebase 自定义声明登录，并使用 Nuxt（模式：SPA）和 Vuetify 进行 UI。那么如何消除错误，以便将内容显示到导航抽屉？

提前谢谢你:))

【问题讨论】：

这能回答你的问题吗？ Why is 'this' undefined inside class method when using promises?

应该是，但我不确定如何在我的代码中真正实现它哈哈。我将var that = this; 放在if (claims.customer) 上方并将this.isSubcon = true; 更改为that.isSubcon = true;，但它仍然弹出相同的错误。也许你可以用代码告诉我如何解决它，好吗？

哦，我也这样做.then(this.isSubcon = true;) 并删除它下面的 if-else 语句只是为了测试，它确实有效。 （因此，这样做实际上与您提供的文章有关）。但是如何在我的 if-else 语句中执行此操作并将我的 v-if 从 false 变为 true。

【参考方案1】：

this 始终取决于调用的范围/对象，data: () => ( ... ) 和 created() 似乎都是另一个对象的属性。如果你调用它：

myObject.created();

那么下面的解决方案应该可以做到。

created() 
  let that = this;
  firebase
   ...
    .then(function ( claims ) 
      if (claims.customer) 
        that.isSubcon = true;  //HERE WHERE THE PROBLEM OCCURS (i think)
       else if (claims.admin) 
        that.isWPC =true;  //THIS ALSO
       else if (claims.subscriber) 
        that.isBWG = true;  //AND THIS ALSO
      
    )

【讨论】：

Uncaught (in promise) TypeError: _this.data is not a function 它给了我这个错误。

我更新了它。 :)

嗨克里斯托珀，它有效！但是在我删除 data() 之后，它只会是 that.isSubcon = true; 等。我认为这与 Nuxt/Vue 有关，因此我们不需要将 data() 放在那里

您能否从that. 之后更新答案（删除data()），以便我可以投票作为已接受的答案（我无法编辑它不知道为什么）。谢谢克里斯托弗 :))

再次更新。不客气。