Vue3 Script Setup点击切换active类失效问题求助

你的问题核心是**selectedTab不是响应式变量**，Vue无法追踪它的变化，导致computed返回的类判断函数不会更新。不需要为每个标签单独声明ref，只需要把selectedTab改成响应式的即可。

修改后的代码 #

模板部分（无需改动）

<div
  @click="onTabClick('first')"
  :class="activeState('first')"
>
  <span>First</span>
</div>
<!-- repeated for second, third, and fourth... -->

Script Setup部分

<script lang="ts" setup>
import { computed, ref } from "vue";

// 将普通变量替换为ref响应式变量
const selectedTab = ref("");

const activeState = computed(
  () => (tab: string) => selectedTab.value === tab ? "active" : "inactive",
);

const onTabClick = (tab: string) => {
  selectedTab.value = tab;
};
</script>

原理说明 #

• 用ref()创建的变量是响应式的，当你修改selectedTab.value时，Vue会自动追踪这个变化。
• computed会依赖selectedTab的响应式变化，重新生成判断函数，模板中调用activeState(tab)时就能返回正确的类名，实现点击标签切换active类的效果。

简化写法（可选） #

如果觉得computed的嵌套函数有点复杂，也可以直接在模板中判断类名，效果完全一致：

<div
  @click="onTabClick('first')"
  :class="selectedTab === 'first' ? 'active' : 'inactive'"
>
  <span>First</span>
</div>

内容的提问来源于stack exchange，提问作者Falco van der Meulen