SvelteKit页面加载时Bootstrap标签页active类未生效问题

我正在学习SvelteKit，想结合Bootstrap 5.3的标签页组件制作仪表盘。为避免跳转到不同路由，使用<button>标签而非<a>标签，通过点击按钮切换页面内容。已初始化首个标签项并为其分配active类，且确认Bootstrap已正确引入项目，但页面加载时首个标签组件未按预期获得active类，尝试使用onMount函数重新分配也无效。代码如下：

<script>
    const firstTabItem = {
        id: "0",
        title: "Home"
    };

    const tabItems = [
        {
            id: "1",
            title: "About us"
        },
        {
            id: "2",
            title: "Products"
        },
        {
            id: "3",
            title: "Contact"
        },
    ]

    let currentTab = 0;
</script>

<h1>Dashboard</h1>

<ul class="nav nav-tabs">
    <button class="nav-link" class:active={firstTabItem.id === currentTab} on:click={() => {currentTab = firstTabItem.id}}>{firstTabItem.title}</button>

    {#each tabItems as item}
        <button class="nav-link" class:active={item.id === currentTab} on:click={() => {currentTab = item.id}}>{item.title}</button>
    {/each}         
</ul>

核心问题是类型不匹配：

• currentTab的初始值是数字类型的0
• 所有标签项的id都是字符串类型（比如"0"）
  Svelte中class:active使用全等运算符===做判断，数字与字符串的全等比较结果为false，因此默认不会为首个标签添加active类。

有两种简单的解决方式：

方式1：统一变量类型 #

将currentTab的初始值改为字符串类型，与标签项的id类型保持一致：

let currentTab = "0";

方式2：调整比较逻辑 #

把全等比较改为非全等==，或者手动进行类型转换：

// 方式A：使用非全等比较
class:active={firstTabItem.id == currentTab}

// 方式B：将字符串id转为数字后比较
class:active={Number(firstTabItem.id) === currentTab}

<script>
    const firstTabItem = {
        id: "0",
        title: "Home"
    };

    const tabItems = [
        {
            id: "1",
            title: "About us"
        },
        {
            id: "2",
            title: "Products"
        },
        {
            id: "3",
            title: "Contact"
        },
    ]

    // 统一为字符串类型的初始值
    let currentTab = "0";
</script>

<h1>Dashboard</h1>

<ul class="nav nav-tabs">
    <button class="nav-link" class:active={firstTabItem.id === currentTab} on:click={() => {currentTab = firstTabItem.id}}>{firstTabItem.title}</button>

    {#each tabItems as item}
        <button class="nav-link" class:active={item.id === currentTab} on:click={() => {currentTab = item.id}}>{item.title}</button>
    {/each}         
</ul>

内容的提问来源于stack exchange，提问作者BingBongUser