Tengo el siguiente problema:

Tengo demasiada lógica en mi estilo en línea y lo colocaría dentro de una propiedad calculada. Yo se, que este es el camino, que debo ir, pero no se, como lograrlo.

A continuación, un ejemplo simple que hice para una mejor comprensión. En él, al presionar el botón, el background-color del componente del niño está cambiando.

Mi código se puede encontrar aquí: Codesandbox

Mi componente principal:

 <template> <div id="app"> <MyChild :colorChange="active ? 'blue' : 'grey'" /> <p>Parent:</p> <button @click="active = !active">Click Me!</button> </div> </template> <script> import MyChild from "./components/MyChild"; export default { name: "App", components: { MyChild, }, data() { return { active: false, }; }, }; </script>

y mi componente hijo:

 <template> <div class="hello"> <p>Hello from the child component</p> <div class="myDiv" :style="{ background: colorChange }"> here is my color, that I change </div> </div> </template> <script> export default { name: "HelloWorld", props: { colorChange: { type: String, default: "green", }, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .myDiv { color: white; padding: 1rem 0; } </style>

También tengo una segunda pregunta. Digamos que tengo más de un componente secundario y también me gustaría cambiar los colores al hacer clic en el botón, pero esos colores difieren. ¿Cómo puedo lograrlo sin repetirme (dentro de las propiedades calculadas?)

Ejemplo de código para mi componente principal:

 <MyChild :colorChange="active ? 'blue' : 'grey'" /> <MyChild :colorChange="active ? 'grey' : 'blue'" /> <MyChild :colorChange="active ? 'blue' : 'red'" /> <MyChild :colorChange="active ? 'yellow' : 'blue'" />

¡Gracias por adelantado!