DESTACADO: Este es un problema resuelto.

Editar: ¡Resolvió el problema usando el consejo de @Amaarockz!

No he tenido mucha experiencia en variables CSS y estructuras de estilo complicadas, ¡pero resultó que son geniales!

Pregunta inicial:

Tengo un menú construido con Vue.js (y Vuetify), datos pasados desde el backend como:

 [ { id: 13241243, color: "#123456", activeColor: "#abcdef", text: "Asadpyqewri" }, { id: 742378104, color: "#234567", activeColor: "#bcdefa", text: "Iudaofqepr" } ]

El menú se parece a:

 <v-btn-toggle> <v-btn v-for="item in items" :key="item.id" :color="item.color"> {{item.text}} </v-btn> </v-btn-toggle>

Problema

Quiero saber, ¿cómo puedo hacer dinámicamente los elementos en un color diferente cuando tienen: pseudo-clase activa?

Lo que he probado:

• Escriba algo en el atributo "estilo" de los elementos de la lista:
  • Falló, ya que no puedo agregar un selector en <element style="">, solo estilos.
• Use un atributo como "color activo" definido por Vuetify:
  • Falló, esas cosas no existen.
• Agregue dinámicamente colores a la clase "v--btn-active", que Vuetify agrega automáticamente:
  • Falló, no puedo encontrar una manera de hacer esto por separado para cada botón.
• Observe cuando aparece la pseudoclase activa, agregue estilo en el oyente:
  • De alguna manera MutationObserver no funcionó para mí.
  • getElementsByClassName[0] sigue obteniendo "nulo". Intenté escribir eso en windows.onload, nada cambió.
  • Una vez devolvió el nodo correcto y pude ver la mutación de clase. Pero no puedo reproducir eso a pesar de que nada cambió en el código.

 mounted(){ window.onload = function(){ const targetNodes = document.getElementsByClassName('asdff'); var a = targetNodes.item(0); //"targetNodes" is a HTMLCollection with 3 elements, but "a" is null. } }

• Agregue una clase diferente a cada botón y escriba CSS separado para ellos usando JavaScript:
  • Tal vez factible, pero el código va a ser extremadamente feo y difícil de mantener.
  • Además, es difícil sobrescribir el estilo predeterminado de Vuetify fuera de <element style>; hay que añadir !importante.

Los últimos dos intentos son los que creo más esperanzadores. ¿Hay alguna forma de solucionarlo?