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