Rails Tailwindcss和Vue Slots下拉菜单link_to不起作用

时间:2019-10-06 17:25:08

标签: ruby-on-rails vue.js

我正在使用Vue包装器构建Rails应用程序。我有一个导航栏,通过Vue Slots和tailwindcss在其中构建了一个下拉菜单项。

菜单打开并完美显示,但是当我打开下拉菜单并单击链接时,什么也没有发生。当我将鼠标悬停在链接上时,它会显示正确的路径,但不会将我重定向到该页面。就像没有点击一样。

我的下拉列表组件:

<template>
  <div class="relative inline-block">
    <div role="button" class="inline-block select-none" @click.prevent="open = !open">
      <slot name="link"></slot>

      <div v-show="open" class="absolute pin-r w-40 mt-1 z-50">
        <slot name="dropdown-items"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      open: false,
    }
  }
}
</script>

我位于我的导航栏中的下拉菜单项:

  <dropdown>
  <a slot="link" href="#" class="lg:p-4 nav-link">Manage Resources</a>

  <div slot="dropdown-items" class="text-center bg-royal-blue opacity-75 rounded-b shadow-lg border overflow-hidden">
    <ul>
      <li class="p-2"><%= link_to "Users", "#", classs: "nav-link" %></li>
      <li class="p-2"><%= link_to "Equipment", "#", classs: "nav-link" %></li>
      <li class="p-2"><%= link_to "Shipper", new_shipper_path, classs: "nav-link" %></li>
      <li class="p-2"><%= link_to "Receiver", new_receiver_path, classs: "nav-link" %></li>
    </ul>
  </div>
  </dropdown>

对于Vue Slots和Vue,我真的很陌生,所以我可能在这里做错了什么?任何援助将不胜感激!

0 个答案:

没有答案