单选按钮选中重新加载Vue后的持久性

Question

我有一些用于我的应用程序导航的选项卡。每个选项卡显示不同的数据表，并且是不同的路由。但是，当用户选择一些筛选器并进行api调用时，当前选择的选项卡将变为默认选项卡，并且在加载数据后不会保留当前选项卡。

api调用后台后，如何保持当前选项卡处于选中状态？

我考虑过session或localStorage，但我不确定如何将选中的属性作为输入字段的目标，以及如何在重新加载/刷新后恢复它。

下面是我的带有标签的模板代码的一些示例：

        <div class="tab">
          <input
            type="radio"
            checked
            name="css-tabs"
            id="tab-1"
            class="tab-switch"
          />
          <label
            for="tab-1"
            class="tab-label"
            @click="$router.push('/route-1')"
          >
            Route - 1</label
          >
          <div class="tab-content">
            <router-view :key="$route.path" />
          </div>
        </div>

<div class="tab">
          <input type="radio" name="css-tabs" id="tab-2" class="tab-switch" />
          <label
            for="tab-2"
            class="tab-label"
            @click="$router.push('/route-2')"
          >
            Route-2</label
          >
          <div class="tab-content">
            <router-view :key="$route.path" />
          </div>
        </div>

Answer 1

我通过重构模板中的选项卡代码解决了这个问题

  <div class="tabs">
    <div class="tab" v-for="(tab, index) in tabs" :key="tab.id">
      <input
        type="radio"
        :name="tab.name"
        :id="tab.id"
        class="tab-switch"
        :checked="tab.checked"
        @change="updatedActiveTab(index)"
      />
      <label
        :for="tab.id"
        class="tab-label"
        @click="$router.push(tab.path)"
      >
        {{ tab.label }}</label
      >
      <div class="tab-content">
        <router-view :key="$route.path" />
      </div>

然后创建一个函数，将checked属性更改为true，将所有其他选项卡更改为false。

      tabs.value.forEach((elem, idx) => {
        elem.checked = idx == index;
      });
      sessionStorage.tabs = JSON.stringify(tabs.value);
    }