How to sync the selected value and selectedTabs according to the route [headlessUI]

[jameswong3388]

I am working on a project that needs HeadlessUI 's Listbox component to handle the page navigation.

Currently, I have 2 pages to navigate, a public profile and an account page. When a route is on the public profile I wish to change the selected value and selectedTabs based on the route.

For example, when route is on the public profile page, the selected value and selectedTabs should be Public profile.

The problem now is that, when a user click on any option, they would be redirect to the page, but since const selectedTab = ref(tabs[0]); it always reset the selected and selectedTab

<script setup>
import { CheckIcon, SelectorIcon } from "@heroicons/vue/solid";

import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
} from "@headlessui/vue";
import { ref } from "vue";
import { Inertia } from "@inertiajs/inertia";

const props = defineProps({
    current: {
        type: Number,
        default: 1,
    },
});

const tabs = [
    { id: 1, name: "Public profile", href: "profile", unavailable: false },
    { id: 2, name: "Account", href: "account", unavailable: false },
];

const selectedTab = ref(tabs[0]);

function handleRedirect(event) {
    Inertia.get('/user/settings/' + event.href, {
        preserveScroll: true,
    });

}
</script>

<template>
    <div>
        <Listbox
            class="px-4 pb-4 sm:hidden"
            v-model="selectedTab"
            @update:modelValue="handleRedirect"
            horizontal
        >
            <div class="relative mt-1">
                <ListboxButton
                    class="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
                >
                    <span class="block truncate">{{ selectedTab.name }}</span>
                    <span
                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
                    >
                        <SelectorIcon
                            class="h-5 w-5 text-gray-400"
                            aria-hidden="true"
                        />
                    </span>
                </ListboxButton>

                <transition
                    leave-active-class="transition duration-100 ease-in"
                    leave-from-class="opacity-100"
                    leave-to-class="opacity-0"
                >
                    <ListboxOptions
                        class="mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                    >
                        <ListboxOption
                            v-slot="{ active, selected }"
                            v-for="tab in tabs"
                            :value="tab"
                            :key="tab.id"
                            as="template"
                        >
                            <li
                                :class="[
                                    active
                                        ? 'bg-amber-100 text-amber-900'
                                        : 'text-gray-900',
                                    'relative cursor-default select-none py-2 pl-10 pr-4',
                                ]"
                            >
                                <span
                                    :class="[
                                        selected
                                            ? 'font-medium'
                                            : 'font-normal',
                                        'block truncate',
                                    ]"
                                    >{{ tab.name }}</span
                                >
                                <span
                                    v-if="selected"
                                    class="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600"
                                >
                                    <CheckIcon
                                        class="h-5 w-5"
                                        aria-hidden="true"
                                    />
                                </span>
                            </li>
                        </ListboxOption>
                    </ListboxOptions>
                </transition>
            </div>
        </Listbox>
    </div>
</template>