Javascript Vue.js-带有动态v-if的动态按钮_Javascript_Vue.js_Vuejs2_Vue Component_Vuetify.js

Javascript Vue.js-带有动态v-if的动态按钮

javascript vue.js vuejs2

Javascript Vue.js-带有动态v-if的动态按钮,javascript,vue.js,vuejs2,vue-component,vuetify.js,Javascript,Vue.js,Vuejs2,Vue Component,Vuetify.js,我正在动态生成一些菜单按钮，不确定这是否是最佳做法剧本 items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/' }, { title: 'Register', icon: 'mdi-image', route: '/register' }, { title: 'Login', icon: 'mdi-help-box', route: '/login' }, ], html 如何根据登录值以编程方式隐藏按钮？我

我正在动态生成一些菜单按钮，不确定这是否是最佳做法

剧本

items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/' },
{ title: 'Register', icon: 'mdi-image', route: '/register' },
{ title: 'Login', icon: 'mdi-help-box', route: '/login' },
],

html

如何根据登录值以编程方式隐藏按钮？我正试着这么做

{ title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/', reqAuth: true }

但不知道如何让它在html中顺利运行。我还想在稍后的登录/注册按钮上做相反的操作，如果用户已登录，则这些按钮应隐藏，注销按钮将发挥作用。

您的items属性应定义为computed属性，并在每个items中添加Showed字段，并在dashboard链接中使用state value作为其值：

computed :{
 items(){
const signedIn=$store.state.user.signedIn; 
  return  [
      { title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/', shown:signedIn },
      { title: 'Register', icon: 'mdi-image', route: '/register',shown:!signedIn},
      { title: 'Login', icon: 'mdi-help-box', route: '/login' , shown:!signedIn},
]
  }
}

在模板中添加

<v-list-item v-for="(item, i) in items" :key="i" link v-if="item.shown" :to="{path: item.route}">

您的items属性应定义为computed属性，并在每个items项目中添加Showed字段，并在dashboard链接中使用state value作为其值：

computed :{
 items(){
const signedIn=$store.state.user.signedIn; 
  return  [
      { title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/', shown:signedIn },
      { title: 'Register', icon: 'mdi-image', route: '/register',shown:!signedIn},
      { title: 'Login', icon: 'mdi-help-box', route: '/login' , shown:!signedIn},
]
  }
}

在模板中添加

<v-list-item v-for="(item, i) in items" :key="i" link v-if="item.shown" :to="{path: item.route}">

您有两个选择：

A具有单独的菜单阵列，并基于isLoggedIn显示一个或另一个。如果在这两种情况下都显示了任何项，则需要将它们放置在第三个数组中，并将前两个数组中的一个与第三个数组合并 B在每个菜单项上都有一个布尔属性，说明在isLoggedIn时是否应该显示。如果两个菜单项都显示，则每个菜单项都需要两个道具showWhenLoggedIn，showWhenLoggedOut-如果太长，请更改它们，或者，您可以将该节目设置为布尔值数组：show:[真，假]-第一个布尔值控制是否在注销时显示，第二个布尔值控制是否在登录时显示。解决方案一个单独阵列的示例：

Vue.config.devtools=false； Vue.config.productionTip=false；新Vue{ el:“应用程序”，数据：=>{ loggedInMenuItems：[ {title:'Dashboard'，icon:'mdi view Dashboard'，route:'/'，show:[false，true]}， ], loggedOutMenuItems：[ {title:'Register'，icon:'mdi image'，route:'/Register'，show:[true，false]}， {标题：“登录”，图标：“mdi帮助框”，路径：'/Login'，显示：[true，false]}， ], 永久菜单项：[ {title:'Terms and Conditions'，图标：'mdi whatever'，路由：'/Terms'，显示：[true，true]} ], 伊斯洛格丁：错 }, 计算：{ 菜单项{ 返回这个.isLoggedIn ？此.loggedInMenuItems ：this.loggedOutMenuItems .concatthis.permanentMenuItems } } } 已登录您有两个选择：