vue.jshtml-entities

v-if not work with HTML Entities string in expression


When I compare 2 equal text in v-if, if text is a HTML entities string like '&lt ;' or '&nbsp ;', it will always return false. I am using vue 3

<script >
    export default {
        computed: {
            text() {
              return '&lt;'
            }
        }
    }
</script>

<template>
  <div>
      <template v-if="text === '&lt;'">
      <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


Solution

  • Should be to work the intended way:

      <template v-if="text === '&amp;lt;'">
    

    It's preferable to avoid such logic in a template as this may lead to ambiguous behaviour.