Vue.js中active类的正确使用：实现点击组件切换文本颜色

问题分析 #

你当前的代码用单个布尔值isActive无法区分两个独立选项，没法实现点击对应组件切换激活状态的效果，另外第二个选项的文本还写错了（重复显示"Phone OTP"）。

修改方案 #

1. 调整数据状态 #

把原来的isActive替换成跟踪当前选中类型的otpType，初始可设置默认激活项：

<script>
export default {
  data() {
    return {
      otpType: 'phoneOtp', // 默认激活Phone OTP
      enabled2FAs: ['phoneOtp', 'authenticatorApp'] // 若这个数组未在别处定义，需补充在此
    };
  }
};
</script>

2. 修正模板代码 #

• 修复第二个选项的文本错误
• 修改类绑定逻辑：通过判断otpType是否等于当前选项的类型，来切换激活/未激活样式

<div
  v-if="enabled2FAs.includes('phoneOtp')"
  @click="otpType = 'phoneOtp'"
>
  <div :class="[otpType === 'phoneOtp' ? activeClass : 'red']">
    Phone OTP
  </div>
</div>
<div
  v-if="enabled2FAs.includes('authenticatorApp')"
  @click="otpType = 'authenticatorApp'"
>
  <div :class="[otpType === 'authenticatorApp' ? activeClass : 'red']">
    Authenticator App
  </div>
</div>

3. 确保样式已定义 #

如果还没设置activeClass的样式，补充如下：

<style scoped>
.activeClass {
  color: #2ecc71; /* 激活状态的文本颜色，可自行修改 */
}
.red {
  color: #e74c3c; /* 未激活状态的文本颜色 */
}
</style>

效果说明 #

点击任意选项时，otpType会更新为对应的值，模板会自动判断并切换该选项的样式，实现点击切换激活状态、改变文本颜色的需求。

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