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>