单选按钮在重新加载 Vue 后检查持久性

Question

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

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

我考虑过 session 或 localStorage，但我不确定如何定位输入字段上的选中属性以及如何在 reload/refresh 之后恢复它。

这是我的一些带有选项卡的模板代码示例：

        <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>

然后创建了一个函数来将选中的属性更改为所选选项卡为真，所有其他为假。

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

单选按钮在重新加载 Vue 后检查持久性

Radio button checked persistence after reload Vue

css

session-storage

local-storage

vue.js

vue-router