When I compare 2 equal text in v-if, if text is a HTML entities string like '< ;' or '  ;', it will always return false. I am using vue 3
<script >
export default {
computed: {
text() {
return '<'
}
}
}
</script>
<template>
<div>
<template v-if="text === '<'">
<h1>Yes</h1>
<span v-html="text"></span>
</template>
<template v-else>
<h1>No</h1>
<span class="label label-default">{{text}}</span>
</template>
</div>
</template>
here is how it rendered I dont know why vue template not render some special string , even in v-if ? Is there any way to keep the HTML Entities string in this case?
And if run that code in vue 2 here, the v-if expression will return true. I dont know what change in vue 3 related to template
Should be to work the intended way:
<template v-if="text === '&lt;'">
It's preferable to avoid such logic in a template as this may lead to ambiguous behaviour.