Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

175
Vistas
Vue.js 3 v-if ternary function, how to pass object as a conditional
<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>

I am bringing in data off a Data Table and with a v-if I am checking to see if cellProps.rowData.BrandColor has a value, if it does I want to use that value as the message, if not, use "NO VALUE PRESENT".

The class works fine, but passing in the value as a message is not working correctly. I am getting the feeling that I am not passing it correctly to message. What would be the proper way to pass the value cellProps.rowData.BrandColor to message ?

7 months ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

You can use a combination of 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>

Which can be shortened with the use of span inside 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>
7 months ago · Juan Pablo Isaza Denunciar

0

Using v-if with ternary operator to set a data property is wrong. You can use @Anurag Srivastava solution, or You can use a computed property. Here is the code:

<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>

Using options api:

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

Using composition api with script setup:

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

0

Or you can use this way as well:

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