点击后如何保持 <li> 可见？答案

【问题标题】：How to keep <li> visible after click?点击后如何保持 <li> 可见？
【发布时间】：2021-07-30 06:05:41
【问题描述】：

我正在尝试为侧边栏创建一个组件。我想要的行为很简单，点击“用户”时会显示另一个子链接（列表）。

问题是当“列表”链接被点击时，它又被隐藏了。

好像点击的时候，组件又回到了之前的状态。

我无法发现我的错误。有什么建议吗？

Laravel 8 + Inertiajs + Tailwindcss + Vue3

我的代码是：

HTML

<template>
    <aside class="menu bg-green-500 text-white border-r border-gray-400">
        <div class="flex justify-center items-center h-14 bg-gray-800">
            Brand
        </div>
        <div class="flex flex-col">
            <ul>
                <inertia-link href="/">
                    <li class="flex items-center p-5 hover:bg-gray-700 cursor-pointer"
                    :class="isUrl('') ? 'bg-gray-700' : ''"
                    >
                        <i class="fas fa-tachometer-alt mr-2"></i>Dashboard
                    </li>
                </inertia-link>
                <li class="flex flex-col p-5 hover:bg-gray-700 cursor-pointer" :class="isUrl('users/index') ?
                    'bg-gray-700' : ''">
                    <!--  -->
                    <a href="#" class="flex items-center" @click="usersMenu = !usersMenu">
                        <div class="flex-grow">
                            <i class="fas fa-users mr-2"></i>Users
                        </div>
                        <div>
                            <i class="fas" :class="{'fa-angle-down': usersMenu, 'fa-angle-left': !usersMenu }">
                            </i>
                        </div>
                    </a>
                    <ul class="flex flex-col pt-5" :class="{ hidden: usersMenu }">
                        <inertia-link href="/users/index">
                            <li class="flex items-center h-14 px-6 hover:bg-gray-600 cursor-pointer rounded"
                                :class=" isUrl('users/index') ? 'bg-gray-600' : ''" >
                                    <i class="fas fa-list mr-2"></i>List
                            </li>
                        </inertia-link>
                    </ul>
                </li>
            </ul>
        </div>
    </aside>
</template>

<script>
export default {
    name: "Menu",
    data() {
        return {
            usersMenu: true
        };
    },
    methods: {
        isUrl(...urls) {
            let currentUrl = this.$page.url.substr(1);
            if (urls[0] === "") {
                return currentUrl === "";
            }
            return urls.filter((url) => currentUrl.startsWith(url)).length;
        }
    },
};
</script>

【问题讨论】：

标签： javascript laravel vuejs3 tailwind-css inertiajs

【解决方案1】：

查看Inertiajs documentation，我发现了有关持久布局的信息，因此我修改了我的内容页面以导入持久布局。

示例：我将仪表板页面更改为：

<script>
import Llayout from "../Shared/Llayout.vue";
export default {
    name: "Dashboard",
    //   components: {
    //     Llayout,
    //   },
    layout: Llayout,
};
</script>

【讨论】：