V-如果與實現CSS下拉按鈕沖突

Question

我正在使用Materialize CSS來設計我的Web應用程序，並且我想根據用戶是否通過身份驗證來顯示鏈接。 我可以輕松地檢查一下，但是當我在下拉按鈕中添加v-if時，它將不再起作用。

這是我的代碼：

<template>
  <ul id="account" class="dropdown-content" v-if="auth">
    <li><a href="#!" class="black-text"><i class="material-icons right">check_circle</i>Link 1</a></li>
    <li><a href="#!" class="black-text"><i class="material-icons right">folder</i>Link 2</a></li>
    <li><a href="#!" class="black-text"><i class="material-icons right">settings</i>Link 3</a></li>
  </ul>
  <nav class="white" role="navigation">
    <div class="nav-wrapper container black-text">
      <ul class="right hide-on-med-and-down">
        <li><a v-if="auth" class="dropdown-button" data-activates="account">{{ auth.first_name }} {{ auth.last_name }}<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a v-if="auth"><i class="material-icons right">exit_to_app</i>Logout</a></li>
        <div v-if="!auth">
          <li>
            <a v-link="{ name: 'registration' }">
              <i class="material-icons right">create</i>
              Sign Up
            </a>
          </li>
          <li>
            <a v-link="{ name: 'authentication' }">
              <i class="material-icons right">fingerprint</i>
              Login
            </a>
          </li>
        </div>
      </ul>
    </div>
  </nav>
</template>

如果刪除v-if，則下拉列表將打開並成功關閉。 我在Chrome代碼檢查器中查看了事件，該代碼出現了，但無法正常工作。

我也懷疑需要使用v-bind綁定類，但這根本沒有幫助。

Answer 1

發生這種情況是因為具體化下拉列表需要初始化一些jquery。 通常，它在加載時運行，但是如果您要向DOM動態添加元素，則需要自己處理它。

您可以在實現文檔中找到如何執行此操作。

特別是在使用vue時，您可能需要為auth變量設置watch 。 每當更改auth ，請務必將初始化代碼應用於新創建的下拉菜單。

這是一個演示如何重新綁定的代碼段。 通過切換v-if使下拉菜單消失並重新出現。 請注意，下拉菜單在反彈之前是如何工作的。

 var app = new Vue({ el: '#app', data: { show: true }, methods: { rebindDropdown: function() { $('.dropdown-button').dropdown(); } }, ready: function() { $('.dropdown-button').dropdown(); } }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> <div id="app"> <button @click="show = !show">Toggle v-if</button> <button @click="rebindDropdown">Rebind Dropdown</button> <div v-if="show"> <!-- Dropdown Trigger --> <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a> <!-- Dropdown Structure --> <ul id='dropdown1' class='dropdown-content'> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li><a href="#!">three</a></li> </ul> </div> </div> 

最后，這是一個示例，顯示如何watch變量，並在變量更改時自動重新綁定。

 var app = new Vue({ el: '#app', data: { show: true }, watch: { 'show': function() { console.log('The value for "show" has changed. Rebinding dropdown...'); $('.dropdown-button').dropdown(); } }, ready: function() { $('.dropdown-button').dropdown(); } }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> <div id="app"> <button @click="show = !show">Toggle v-if</button> <div v-if="show"> <!-- Dropdown Trigger --> <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a> <!-- Dropdown Structure --> <ul id='dropdown1' class='dropdown-content'> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li><a href="#!">three</a></li> </ul> </div> </div>