Javascript Vue在多个按钮状态之间切换

我似乎找不到切换按钮类的4种状态的解决方案。我试图修改“isFollowing”类型的代码，但没有结果。我只是想切换到关闭状态和3种颜色

<button v-on:click="market(p)"
                  v-bind:class="p.isFollowing ? following : not-following"></button>


methods: {
  market: async function (symbol) {
      if (symbol.isFollowing){
        
      } else {
        //send post
      }
      this.symbol.forEach(u => {
        if (u.symbol == symbol.symbol) {
          const id = symbol.symbol
          u.symbol = "TEMP"
          u.isFollowing = !u.isFollowing
          u.symbol = id
        }
      })
  }
}


//cant get this to work:

<button v-on:click="market(p)"
                  v-bind:class="['marketButton', { 'marketButtonOff': p.marketOff, 'marketButtonGreen': p.marketGreen, 'marketButtonYellow': p.marketYellow, 'marketButtonRed': p.marketRed }]
                  "></button>

方法：{
市场：异步功能（符号）{
如果（符号如下）{
}否则{
//邮寄
}
this.symbol.forEach（u=>{
如果（u.symbol==symbol.symbol）{
const id=symbol.symbol
u、 symbol=“TEMP”
u、 isFollowing=！u.isFollowing
u、 symbol=id
}
})
}
}
//无法使其工作：

我创建了一个测试组件，它使用按钮点击处理程序来更改数据值。数据值的此更改会触发返回button类的计算属性的更新

<template>
  <div class="multiple-button-states">
    <button type="button" :class="buttonClass" @click="changeButtonState">Trigger color change</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        buttonState: 1
      }
    },
    computed: {
      buttonClass() {
        let returnClass = ''
        switch(this.buttonState) {
          case 2:
            returnClass = 'green';
            break;
          case 3:
            returnClass = 'blue';
            break;
          case 4:
            returnClass = 'yellow';
            break;
          default:  // 1
            returnClass = 'red';
        }

        return returnClass;
      }
    },
    methods: {
      changeButtonState() {
        if (this.buttonState === 4) {
          this.buttonState = 1;
        }
        else {
          this.buttonState++;
        }
      }
    }

  }
</script>

<style scoped>
  .red {
    background-color: red;
  }

  .green {
    background-color: green;
  }

  .blue {
    background-color: blue;
  }

  .yellow {
    background-color: yellow;
  }
</style>

触发颜色变化
导出默认值{
数据（）{
返回{
按钮状态：1
}
},
计算：{
buttonClass（）{
让returnClass=''
开关（此按钮状态）{
案例2：
returnClass='绿色'；
打破
案例3：
returnClass='blue'；
打破
案例4：
returnClass='yellow'；
打破
默认值：//1
returnClass='red'；
}
返回类；
}
},
方法：{
changeButtonState（）{
if（this.buttonState===4）{
this.buttonState=1；
}
否则{
这个.buttonState++；
}
}
}
}
瑞德先生{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}
蓝先生{
背景颜色：蓝色；
}
黄先生{
背景颜色：黄色；
}

变量

p

的外观如何？这4种状态相互排斥吗？您的

符号

数据集是什么样子的？非常感谢！！这与Vue语法配合得好吗？我可能会有几个问题，但是谢谢你这个好的开始！欢迎光临。很高兴我能帮忙。这似乎是纯javascript，你熟悉Vue语法吗？我对Vue很有经验。我的示例是我的Vue CLI沙盒应用程序中的一个文件组件，其中包含Vue指令，如v-bind（：class）和v-on（@click）、方法、computed等。Vue组件中包含vanilla JS的情况并不少见。Vue毕竟是用JS写的。太好了，非常感谢！