• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

329
Vistas
Vue.js 3 función ternaria v-if, cómo pasar objeto como condicional
<div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'"> <p v-if="cellProps.rowData.BrandColor ? message='cellProps.rowData.BrandColor' : message='NO VALUE PRESENT' ">Brand Color#: {{ message }}</p> </div>

Estoy trayendo datos de una tabla de datos y con una v-si estoy verificando si cellProps.rowData.BrandColor tiene un valor, si es así, quiero usar ese valor como mensaje, si no, use "SIN VALOR PRESENTE".

La clase funciona bien, pero pasar el valor como un mensaje no funciona correctamente. Me da la sensación de que no lo estoy pasando correctamente a mensaje. ¿Cuál sería la forma correcta de pasar el valor cellProps.rowData.BrandColor al mensaje?

about 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Puede usar una combinación de v-if / v-else :

 <div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'"> <p v-if="cellProps.rowData.BrandColor">Brand Color#: {{ cellProps.rowData.BrandColor}}</p> <p v-else>Brand Color#: NO VALUE PRESENT</p> </div>

Que se puede acortar con el uso de span dentro de p :

 <div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'"> <p> Brand Color#: <span v-if="cellProps.rowData.BrandColor">{{ cellProps.rowData.BrandColor }}</span> <span v-else>NO VALUE PRESENT</span> </p> </div>
about 3 years ago · Juan Pablo Isaza Denunciar

0

Usar v-if con el operador ternario para establecer una propiedad de datos es incorrecto. Puede usar la solución @Anurag Srivastava, o puede usar una computed property . Aquí está el código:

 <div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'"> <p v-if="cellProps.rowData.BrandColor ? message='cellProps.rowData.BrandColor' : message='NO VALUE PRESENT' ">Brand Color#: {{ message }}</p> </div>

Usando options api :

 export default() { // ... computed: { message() { return this.cellProps.rowData.BrandColor ?? 'NO VALUE PRESENT' } }, // ...

Usando composition api con la configuración del script:

 import { computed } from 'vue' // ... const message = computed(() => props.cellProps.rowData.BrandColor ?? 'NO VALUE PRESENT') // ...
about 3 years ago · Juan Pablo Isaza Denunciar

0

O también puedes usar de esta manera:

 <p v-if="cellProps.rowData.BrandColor"> .... </p> <p v-if="!cellProps.rowData.BrandColor"> NO VALUE PRESENT</p>
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda