Question

我使用Materialise 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-ifs，下拉列表会打开并成功关闭。我在Chrome代码检查器中查看了该事件，但代码出现但无法正常工作。

我还怀疑这些类需要使用v-bind绑定，但这根本没有帮助。

Answer 1

这种情况正在发生，因为物化下拉列表需要初始化一些jquery。通常这是在运行时运行，但是如果要动态地向DOM添加元素，则需要自己处理它。

您可以在materialize docs。

中了解如何执行此操作

特别是在使用vue时，您可能需要为watch变量设置auth。每当更改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>

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

1 个答案: