Nuxt3布局组件中单选按钮选中状态不显示问题排查

在Nuxt3应用中使用自定义页面布局，用户选择单选选项时URL会同步更新（如solved、unsolved选项），功能运行正常，但选中项的单选按钮未显示选中状态。例如点击“Solved Tickets”选项后，对应的单选按钮无选中标识。

相关代码（components/AppFilter.vue） #

<template>
  <section>
    <div class="list-group">
      <NuxtLink to="/" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="all"
          id="firstRadio"
        />
        <label class="form-check-label" for="firstRadio"
          >All tickets/index page</label
        >
      </NuxtLink>
      <NuxtLink to="/solved" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="solved"
          id="secondRadio"
        />
        <label class="form-check-label" for="secondRadio">Solved Tickets</label>
      </NuxtLink>
      <NuxtLink to="/unsolved" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="unsolved"
          id="thirdRadio"
        />
        <label class="form-check-label" for="thirdRadio"
          >Unsolved Tickets</label
        >
      </NuxtLink>
    </div>
    {{ picked }}
  </section>
</template>

问题原因 #

• 单选框未与路由状态绑定：当前代码中的单选框没有根据当前路由路径设置checked状态，页面跳转后组件重新渲染，但单选框的选中状态不会自动同步路由变化。
• NuxtLink跳转特性：点击NuxtLink触发页面导航后，组件重新挂载，此时单选框的状态没有基于当前路由做初始化。

解决方案 #

通过绑定路由状态动态设置单选框的选中状态，具体实现如下：

修改后的完整代码 #

<template>
  <section>
    <div class="list-group">
      <NuxtLink to="/" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="all"
          id="firstRadio"
          :checked="route.path === '/'"
        />
        <label class="form-check-label" for="firstRadio"
          >All tickets/index page</label
        >
      </NuxtLink>
      <NuxtLink to="/solved" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="solved"
          id="secondRadio"
          :checked="route.path === '/solved'"
        />
        <label class="form-check-label" for="secondRadio">Solved Tickets</label>
      </NuxtLink>
      <NuxtLink to="/unsolved" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="unsolved"
          id="thirdRadio"
          :checked="route.path === '/unsolved'"
        />
        <label class="form-check-label" for="thirdRadio"
          >Unsolved Tickets</label
        >
      </NuxtLink>
    </div>
  </section>
</template>

<script setup>
const route = useRoute()
</script>

关键说明 #

• 使用:checked（Vue的v-bind语法）动态绑定选中状态，确保路由变化时单选框状态同步更新。
• useRoute()是Nuxt3内置的composable，用于获取当前路由实例，会自动响应路由变化，无需手动监听。

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