v-if 防止引导下拉菜单扩展

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 action 中从本地存储中获取，然后将其保存到名为 user 的变量中的应用程序状态中，该变量由我之前提到的那个 getter 返回。

有什么可能会影响它的想法，甚至是解决这个问题的解决方法吗？

Answer 1

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

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