[Vuejs]-Is there a way to make escaping characters work in Vue.js in this case?

0👍

v-html will not add escape characters. Your text input must have already been escaped; The source that provides the property has already escaped the text before it is sent in as a property.

You need to fix that before the value is sent in, or by unescaping in your consuming component by adding a computed property, or creating a filter.

See this pen. https://codepen.io/Flamenco/pen/xovKLq

        <div v-html='message'></div>
        <div v-html='message2'></div>
        <div v-html='message3'></div>
        <div v-html='computed3'></div>

    data: () => ({
        message: "Hello \"World\"",
        message2: `Hello \"World\"`,
        message3: 'Hello \\"World\\"', // this one is your property.
      }),

    computed: { 
     computed3() {
          return this.message3.replace(/\\"/g, '"');
        }
    }

I recommend dealing with this by fixing the source though…

0👍

you can use innerText or :innerText on your div like so

<div innerText="String with </> which won't be interpreted" />

or

<!-- specialText: 'String with </> which won't be interpreted', -->

<div :innerText="specialText" />

If you know that you will need special characters at the beginning or the end of the sentence, you can use ::before or ::after, special characters won’t be interpreted either.

nav a::before {
    content: '<';
}

nav a::after {
    content: '/>';
}

-2👍

you can use double slashes like \\

Leave a comment