Vue.js 3 v-if ternary function, how to pass object as a conditional

Question

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

Answer 1

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

To set message='cellProps.rowData.BrandColor' , I learned to just drop the single quotes like this:

 message= cellProps.rowData.BrandColor

Final version:

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

Answer 2

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>

Answer 3

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>

Answer 4

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