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

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

CodePudding user response：

You can use a combination of v-if/v-else:

<div :>
    <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 :>
    <p>
        Brand Color#: 
        <span v-if="cellProps.rowData.BrandColor">{{ cellProps.rowData.BrandColor }}</span>
        <span v-else>NO VALUE PRESENT</span>
    </p>
</div>

CodePudding user response：

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>