两次点击事件切换按钮

Question

两次点击事件切换一组按钮颜色和跳转vue3的路由
两个点击事件切换两个按钮，点击时跳转路由，改变当前颜色，点击另一个，然后相同

我可以改变颜色或跳过路线，但这两者不能同时进行。我只能在双击后更改颜色。

<button :class="isRed ? 'red-button':'blue-button'" @click="handleRoute()">red-button</button>
<button :class="isRed ? 'red-button':'blue-button'" @click="handleRoute()">blue-button</button>

function handleRoute(){
    isRed.value = !isRed.value;
    if (isRed.value) {
        router.push('/')
    } else {
        router.push('/about')
    }
}

Answer 1

<template>
  <div>
    <button :class="isRed ? 'red-button' : 'blue-button'" @click="handleClick(1)">Button 1</button>
    <button :class="isRed ? 'red-button' : 'blue-button'" @click="handleClick(2)">Button 2</button>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const state = reactive({
      isRed: false,
      clickedButton: 0
    })

    const handleClick = (buttonNum) => {
      if(buttonNum === state.clickedButton) {
        state.isRed = !state.isRed
        if(state.isRed) {
          router.push('/')
        } else {
          router.push('/about')
        }
      }
      state.clickedButton = buttonNum
    }

    return {
      isRed: state.isRed,
      handleClick
    }
  }
}
</script>

<style>
.red-button {
  background: red;
  color: white;
}
.blue-button {
  background: blue;
  color: white;
}
</style>