Problem while trying to use v-if on <p> with a field in an object that was passed thru form submit event


I’m trying to list some records that is submitted from another Vue component. I can show the attributes in the object, however, I cannot use a boolean field with v-if. I just want to show a text with “< p >” with a condition.
The rows with {{ review.* }} are fine, the problem is with the

with v-if and v-else rows.
What am I missing here?
This is the code snippet.
Thanks in advance.

Is your {{ review.recommended }} boolean data type?

Yes, it is. I’ve it like this in the component template; v-model.boolean="recommended"

Hi, this post might help


Yes, it was somehow useful. The reason was more like a JS problem rather than vue. I was trying to create a condition with the boolean review.recommended like the following v-if=“review.recommended”.
I fixed it with changing it to v-if="review.recommended===‘true’.
Now it works as I wanted. Thanks^^

Technically this would mean your boolean is a string. So while this fixes your issue, there’s still an underlying issue as you don’t want to be checking against strings for a “boolean” value… but, we’d need to see the related code to help.


Here is the snippets from my code.
But when I change v-model for “recommended” from v-model to v-model.boolean, it does not work.