Tengo una lista JSON de elementos que importo en mi componente vue, recorro ese archivo para mostrarlos. Cada artículo pertenece a un 'grupo' específico:
Ver IMG
P.ej :
{ "type": "Simple list", "title": "Simple list", "id": 1, "group": "list-component", "properties": "lorem lipsum" },Me gustaría aplicar un 'border-top-color' de CSS a cada elemento según su grupo.
Estaba tratando de aplicar las condiciones cuando se enmudeció(){} pero no estoy seguro de si lo estoy haciendo bien. Aquí está mi intento:
La plantilla (estoy usando VueDraggable, no importa):
<div class="item drag" :key="element" :style="[{ 'border-top-color': 'brdrTpClr' }]"> {{ element.title }} <div class="addico" :key="index"> <i class="fas fa-add"@click="$emit('pushNewElt', element.id)"></i> </div> </div>El guion :
data() { return { dragItems: dragItemsList, brdrTpClr: "", }; }, mounted() { for (let i = 0; i <= 15; i++) { if (this.dragItems[i].group == "list-component") { // I'm not sure how to do it // the color I want to apply : #00A3A1b } else if (this.dragItems[i].group == "location-media-component") { // #005EB8 } else if (this.dragItems[i].group == "container-component") { // #0091DA } else if (this.dragItems[i].group == "UI-component") { // #6D2077 } else if (this.dragItems[i].group == "reader-scanner-component") { // #470A68 } } },Estoy usando i<=15 en lugar de i<=this.dragItems.length debido a un error, no te preocupes.
Probablemente la solución más eficiente (en cuanto al rendimiento) y más legible sería declarar un mapa de colores constante, fuera del componente, y luego devolver el valor correcto o una alternativa, usando un método:
<script> const colorMap = { "list-component": '#00A3A1', "location-media-component": '#005EB8', "container-component": '#0091DA', "UI-component": '#6D2077', "reader-scanner-component": '#470A68' } export default { //... methods: { borderColor(group) { return colorMap[group] || '#000' } } } </script> <template> ... <div :style="{borderColor: borderColor(element.group)}"> content... </div> </template> Como regla general, desea tomar algo más complicado que un simple ternario fuera de la plantilla y proporcionarlo a través de methods computed o .
Nota al margen: el método anterior también se puede escribir como computed :
computed: { borderColor: group => colorMap[group] || '#000' } Si necesita el mapa de colores en más de un componente, colorMap desde un archivo de constants.(js|ts) e impórtelo donde sea necesario. Por lo general, llamo a ese archivo helpers , ya que normalmente también contiene funciones estáticas o mapas (cualquier cosa que reutilice en múltiples componentes/módulos).
Importante : actualmente estás pasando una matriz a :style . Deberías estar pasando un objeto.
Haría un método llamado getBorderColor(item) que devuelve el color según el grupo y luego lo vincula dinámicamente usando Vue.
<div class="item drag" :style="[{ 'border-top-color': getBorderColor(element) }]" > {{ element.title }} // Add icon etc. </div> getBorderColor(element) { // Can use a switch statement, but here's a simple ternary if/else as an example return element.group === "list-component" ? `#00A3A1b` : element.group === "location-media-component" ? `#005EB8` : element.group === "container-component" ? `#0091DA` : element.group === "UI-component" ? `#6D2077` : element.group === "reader-scanner-component" ? `#470A68` : `#000000`; // Default colour } o para una opción más limpia, puede tener un objeto con sus grupos como claves y colores como valores en data por ejemplo
return { dragItems: dragItemsList, brdrTpClr: "", colors: { "list-component": `#00A3A1b`, "location-media-component": `#005EB8`, // etc. }, }; getBorderColor(element) { return this.colors[element.group] || `#000`; }