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防止引導下拉擴展

回答

相關問題