v-if防止引导下拉扩展

我发现v-if语句时真的很奇怪（没有提到令人沮丧的问题）。基本上我试图根据用户权限隐藏边栏下拉菜单，事情是当我添加v-if语句时，下拉菜单在用户刚刚登录时停止工作;那么当用户刷新页面时，一切正常。v-if防止引导下拉扩展

<li v-if="getUser.permissions && getUser.permissions.includes('some-permission')" > 
     <a data-toggle="dropdown" class="dropdown-toggle" href="#"> 
      <i class="fa fa-flask"></i><span v-show="isMaximized">Genetics<i class="fa arrow"></i></span> 
     </a> 
     <ul class="nav nav-second-level collapse"> 
      <li> 
       <router-link to="/route1"><i class="fa fa-bar-chart"></i> <span class="nav-label">Element 1</span></router-link> 
      </li> 
      <li> 
       <router-link to="/route2"><i class="fa fa-refresh"></i> <span class="nav-label">Element 2</span></router-link> 
      </li> 
      <li> 
       <router-link to="/route3"><i class="fa fa-list"></i> <span class="nav-label">Element 3</span></router-link> 
      </li> 
      <li> 
       <router-link to="/route4"><i class="fa fa-leaf"></i> <span class="nav-label">Element 4</span></router-link> 
      </li> 
     </ul> 
    </li>

如果我删除了V-如果检查权限，下拉工作得很好，但如果我把它放回去，用户需要刷新页面才能正常工作。

注意：getUser是一个获取用户信息的vuex getter。用户信息在主要组件加载时从vuex动作中从本地存储中获取，然后将其保存到名为user的变量中的应用程序状态中，该变量由我之前提到的那个获取器返回。

任何想法可能会影响它甚至解决方法来克服这一点？

来源

2017-02-27 ZSnake

任何错误？另外，你可以定义*“不工作”* – Phil

没什么，只是没有做任何事情 – ZSnake

你使用的是什么版本的Bootstrap？ – Phil

-1

据我所知，您需要手动拨打$('.element').dropdown()，v-if后生效并显示元素。

就个人而言，我会提取该元素为组件，并在mounted()生命周期事件致电$('.element').dropdown()，但也有其他方法可以做到这一点，当然:)在控制台

来源

2017-02-27 23:47:59 thisdotvoid

刚刚试过这个没有成功:(在我的挂载功能里有，我加了$（'＃genetics-dropdown'）。dropdown（）;'是'＃genetics-dropdown'内部的'ul'（应该包含下拉菜单的那个，我是不是添加了它？ – ZSnake

只是为了确保我的观点是有效的，'v-show'工作而不是'v -if'？ – thisdotvoid

Nope，Bootstrap在'document'级别使用事件委托来检测'[data-toggle =“dropdown”]元素上的事件'元素 – Phil

v-if防止引导下拉扩展

回答

相关问题