<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?
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>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') // ...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>