Vue项目问题：点击单个数字如何单独切换背景色而非全部变色

问题原因 #

你当前使用了一个全局布尔值isActive控制所有列表项的激活状态，所有<li>绑定同一个状态变量，导致点击时所有项的状态同时切换，出现全变橙色的问题。

解决方案 #

需要记录当前选中的具体评分值，而非单一布尔值，以此单独控制每个列表项的激活状态：

修改后的代码 #

Script部分

<script setup>
import { ref } from "vue";

const rates = ref([1, 2, 3, 4, 5]);
// 用变量记录选中的评分，初始为null表示未选中
const selectedRate = ref(null);

// 点击时传入当前评分，更新选中值
const selectPick = (rate) => {
  selectedRate.value = rate;
};
</script>

Template部分

<template>
  <main>
    <div v-show="!isVisible" class="card-container">
      <div class="content-container">
        ...
        <ul>
          <li
            v-for="rate in rates"
            :key="rate"
            @click="selectPick(rate)"
            class="rating"
            <!-- 判断当前评分是否等于选中值，来添加active类 -->
            :class="{ active: rate === selectedRate }"
          >
            {{ rate }}
          </li>
        </ul>

        <button class="btn">Submit</button>
      </div>
    </div>
  </main>
</template>

说明 #

• 用selectedRate存储当前选中的评分值，点击不同评分时直接覆盖这个值，实现单选切换。
• 每个<li>通过rate === selectedRate判断自身是否处于激活状态，只有匹配的项才会添加active类（显示橙色背景）。

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