Vue.js 基于条件在vue中渲染组件

我一直在尝试根据当前登录的电子邮件/帐户在导航栏中呈现一些组件。目前有一个函数“getUser（）”可以获取用户的电子邮件。因此，在导航栏中有：主页、采购站点、监控、管理和注销。我只是提出了一个条件admin@gmail.com然后可以看到导航栏中的“管理”部分。我已尝试确保该功能正常工作，并返回电子邮件地址和使用

<template v-if="this.email == 'admin@gmail.com'">
     <li class="nav-item">
         <router-link to= "/Admin"> Admin </router-link>
     </li>
</template>

管理

上面的代码通过在导航栏中隐藏admin部分来工作，但是即使我通过admin@gmail.com账户请帮忙。多谢各位

导航栏的完整代码：

<div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
              <router-link to= "/Procurement"> Home </router-link>
          </li>
          <li class="nav-item">
              <router-link to= "/ProcurementSite"> Procurement Sites </router-link>
          </li>
          <li class="nav-item">
              <router-link to= "/Monitoring"> Monitoring </router-link>
          </li>
            <template v-if="this.email == 'admin@gmail.com'">
                <li class="nav-item">
                    <router-link to= "/Admin"> Admin </router-link>
                </li>
            </template>
          <li class="nav-item">
              <router-link to="/" v-on:click="logOut()"> Log Out </router-link>
          </li>
        </ul>
      </div>
<script>
    import $backend from './../backend'
    
    export default {
      name: 'nav',
      data () {
          return {
            email: ''
          }
          
      },
      methods: {
        getUser () {
            console.log("in get user in monitor vue")
            $backend.getUser()
            .then(responseData => {   
            this.email = responseData.result
            console.log(this.email)
            }).catch(error => {
            this.error = error.message
            })
        }
      }
    }
</script>

家


采购地点


监测


管理


注销


从“/../backend”导入$backend
导出默认值{
名称：'导航'，
数据（）{
返回{
电子邮件：“”
}
},
方法：{
getUser（）{
console.log（“在监视器vue中获取用户”）
$backend.getUser（）
.then（responseData=>{
this.email=responseData.result
console.log（this.email）
}).catch（错误=>{
this.error=error.message
})
}
}
}

以下是一些示例代码以帮助您

请在此处查看正在运行的代码：

“是的，您是管理员”

仅当电子邮件是

admin@gmail.com

电邮：
{{email}}
你是管理员吗？是的，你是管理员
从“vue”导入{defineComponent}；
导出默认定义组件({
数据（）{
返回{
电子邮件：“admin@gmail.com"
}
}
});

当你

控制台.log

它时，这个.email的值是多少？另外，在哪里调用

getUser

方法？我试图通过{this.email}打印页面中的某个地方，并获取admin@gmail.com. 使用“this.email”不是可以得到值吗？但我确实在安装前将getUser放在了部分。如果您可以从模板中删除“this”关键字，您可以编辑您的问题并共享更多代码（例如在何处调用getUser方法）或指向codesandbox上的实时演示的链接吗