如何在Vuetify v-btn点击时切换按钮颜色？

核心思路 #

通过响应式变量控制按钮颜色，点击时切换变量值即可实现颜色切换，同时正确结合v-bind="props"的用法。

具体实现代码 #

Vue 3 (Composition API)

<template v-slot:activator="{ props }">
  <v-btn 
    :color="currentColor" 
    v-bind="props"
    @click="toggleColor"
  >
    SELECTION
  </v-btn>
</template>

<script setup>
import { ref } from 'vue'

// 定义响应式变量存储当前颜色，初始值设为black
const currentColor = ref('black')

// 切换颜色的方法
const toggleColor = () => {
  currentColor.value = currentColor.value === 'black' ? 'primary' : 'black'
}
</script>

Vue 2 (Options API)

<template v-slot:activator="{ props }">
  <v-btn 
    :color="currentColor" 
    v-bind="props"
    @click="toggleColor"
  >
    SELECTION
  </v-btn>
</template>

<script>
export default {
  data() {
    return {
      currentColor: 'black'
    }
  },
  methods: {
    toggleColor() {
      this.currentColor = this.currentColor === 'black' ? 'primary' : 'black'
    }
  }
}
</script>

关键说明 #

• 使用:color（即v-bind:color的简写）将按钮颜色绑定到响应式变量currentColor，替代原来固定的color="black"。
• v-bind="props"会将插槽传递的属性绑定到按钮上，和:color不会冲突，Vue会自动合并这些属性。
• 点击事件@click="toggleColor"触发颜色切换逻辑，通过三元表达式判断当前颜色并切换到另一种。

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