Question

我发现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-if检查权限，则下拉列表工作正常，但如果我将其放回去，则用户需要刷新页面才能正常工作。

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

任何可能影响它的想法，甚至是解决这个问题的解决方法？

Answer 1

根据我的理解，您需要在$('.element').dropdown()生效并显示元素后立即手动调用v-if。

就个人而言，我会将此元素提取到组件中并在$('.element').dropdown()生命周期事件中调用mounted()，但当然还有其他方法可以做到这一点：）

v-如果防止bootstrap下拉扩展

1 个答案: