Vue动态按钮点击时同步变色问题求助

你当前的核心问题是两个按钮共享了同一个全局active状态变量。App组件中的active是单一的响应式变量，无论点击哪个按钮，都会切换这个变量的值，导致两个按钮的color绑定逻辑同时触发，最终出现同步变色的情况。

给每个按钮分配独立的状态，让它们各自管理自身的激活状态，而非共用同一个变量。

修改App.vue代码 #

1. 替换data中的单一active为两个独立的状态变量：

data() {
  return {
    darkBtnActive: true,
    lightBtnActive: true,
    color: "#3aa1b6",
  };
},

2. 调整点击事件，让每个事件仅切换对应按钮的状态：

methods: {
  handleDarkMode() {
    console.log("Dark-mode clicked");
    this.darkBtnActive = !this.darkBtnActive;
  },

  handleLightMode() {
    console.log("Light-mode clicked");
    this.lightBtnActive = !this.lightBtnActive;
  },
},

3. 给每个DynamicButton绑定对应状态变量：

<DynamicButton
  buttonText="Dark Mode"
  :dark="true"
  @click="handleDarkMode"
  :color="darkBtnActive ? 'red' : 'blue'"
/>

<DynamicButton
  buttonText="Light Mode"
  @click="handleLightMode"
  :color="lightBtnActive ? color : '#16a085'"
/>

额外优化建议 #

• DynamicButton组件中定义的active prop未实际使用，可考虑删除或根据需求扩展其用途（比如绑定到组件内的样式逻辑）。
• Vue模板中无需使用this.访问data变量，因此lightBtnActive ? this.color : '#16a085'可简化为lightBtnActive ? color : '#16a085'。

修改完成后，点击任意按钮只会改变自身的背景色，不会影响另一个按钮的状态。

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