V-If 与 Materialise CSS 下拉按钮冲突

Question

我正在使用 Materialize CSS 来设计我的网络应用程序，并且我想根据用户是否经过身份验证来显示链接。我可以轻松地检查这一点，但是当我向下拉按钮添加 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 动态添加元素，则需要自己处理。

您可以在materialize docs 中了解如何执行此操作。

特别是在使用 vue 时，您可能需要为您的 auth 变量设置一个 watch。每当 auth 更改时，请务必将初始化代码应用于新创建的下拉菜单。

这是一个演示如何重新绑定的 sn-p。通过切换 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>