Tengo una función vue que actualmente usa bucles v-for anidados para iterar un objeto y crear una tabla con filas y celdas en consecuencia. Esto está funcionando, pero necesito descubrir cómo obtener un v-if en la parte más anidada ahora y mirar el valor discarded para establecer un estilo condicional.
Básicamente, para cada elemento td , quiero verificar tests.discarded, y si el número en ese campo es mayor que 0, entonces coloreo la celda de rojo. Si no, coloréalo de verde.
¿Cómo puedo lograr esto con el estado actual de mi código? No puedo usar un v-if en mi elemento v-for más anidado
namestest: [ name: "john", date: "08/12/21", discarded: 4, count: 19 ] <tr v-for="(tests, name) in namestest" :key="name"> <td>@{{ name }}</td> //each time i iterate through it, it should check the discarded field and see if greather than 0. If so, then we color the cell red <td v-for="date in dates" :key="date">@{{ tests[date] && tests[date].count }}</td> </tr>No es necesario usar v-if para aplicar estilos condicionalmente:
<td :style="'background: ' + (tests.discarded > 0 ? 'red' : 'green')">@{{ name }}</td>Obviamente, puede usar la solución @slauth con una expresión en línea dentro del atributo de estilo o puede crear un método/función.
Ya sea que esté utilizando la API de opciones o la API de composición , simplemente defina su función que aceptaría un parámetro (descartado). Incluso puede definir varios métodos, uno para diseñar el color y el otro para la representación condicional del texto.
Finalmente, para las condiciones en línea, siempre puede usar <template v-if="something"> cualquier cosa entre las etiquetas de plantilla se representará y las etiquetas de plantilla desaparecerán.
Podrías hacerlo así:
<td>@{{ name }}</td> <td v-for="date in dates" :style="'background: ' + (tests[date].discarded > 0 ? 'red' : 'blue')" :key="date">@{{ tests[date] && tests[date].count }}</td> Y use un estilo en línea condicional. O bien, podría poner el condicional en el enlace de la class , en lugar del atributo de style . Me gusta
<td v-for="date in dates" :class="{ badcell: (tests[date].discarded > 0) }">@{{ tests[date] && tests[date].count }}</td> De esta manera, la clase badcell solo se aplicará si la clase discarded es mayor que 0. Y luego tenga un estilo para la nueva clase ' badcell ' en su CSS o SCSS.
td.badcell { background-color:red; font-weight:bold; }