我正在使用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,我真的很陌生,所以我可能在这里做错了什么?任何援助将不胜感激!