Vuejs_ object在if条件中返回空

bxfogqkk  于 2022-12-14  发布在  Vue.js
关注(0)|答案(2)|浏览(105)

我尝试给予用户某些权限,但无法访问teamsList对象,该对象在“if条件”中显示为空
输出控制台

请检查此图像。if条件不起作用。

async created() {
  console.log('teams list is before loading teams',this.teamsList);
    this.loadTeams()
      .then((response) => {
        this.teamsList = response.data;
         console.log('teams list is after loadteams',this.teamsList);

      })
      .catch((error) => {
        console.log(error);
      });
      
      if (this.teamsList.teamName==='admins') {
      this.haveAccess=true
      console.log('access-check',this.teamsList.teamName);
    } 
  console.log('access-check', this.haveAccess,this.teamsList);
  }
9q78igpj

9q78igpj1#

将if条件放在.then方法中,也可以删除async,因为您没有使用await

created() {
      console.log('teams list is before loading teams',this.teamsList);
      this.loadTeams()
      .then((response) => {
        this.teamsList = response.data;
         console.log('teams list is after loadteams',this.teamsList);
         if (this.teamsList.teamName==='admins') {
           this.haveAccess=true
           console.log('access-check',this.teamsList.teamName);
         } 
         console.log('access-check', this.haveAccess,this.teamsList);
      })
      .catch((error) => {
        console.log(error);
      });
  }
bvjxkvbb

bvjxkvbb2#

如果对象属性位于数组内部,则不能直接访问该对象的属性。
在您的代码中,teamsList变量是一个包含3个项目的数组。因此,您不能直接在该数组上访问teamName属性。
如果您的数据是动态的,则每次都需要循环访问其属性teamName

this.teamsList.forEach(item => {
  if (item.teamName === 'admins') {
     this.haveAccess=true;
     console.log('access-check', item.teamName);
  }
})

如果你的数据是固定的,这意味着总是一个数组的3个项目与固定的数据,然后你可以访问它像这样-

if (this.teamsList[0].teamName === 'admins') {
   this.haveAccess=true;
   console.log('access-check', this.teamsList[0].teamName);
}

相关问题