Preserve whitespace when evaluating {{{data}}}

[BenRomberg]

I have a use-case where I show indented code with white-space: pre. As such, preserving the whitespace in the rendered document is critical. Vue seems to trim the whitespace when evaluating {{{data}}} expressions with embedded HTML tags. I wonder if this is necessary or if there's a workaround available.

For now, I'm replacing all spaces in the beginning with   which is a very ugly workaround I'd like to get rid of.

Other than that I must say I'm pretty happy with Vue so far! Good work! :-)

[yyx990803]

What whitespace are you referring to? I'm not really understanding what the problem is.

[BenRomberg]

Consider this minimum example:

<template>
    <pre>{{{line}}}</pre>
</template>

<script>
module.exports = {
  data: function() {
    return {
      line: '   <span>this has whitespace</span>'
    }
  }
}
</script>

Note the whitespace in front of the <span> tag, which should be rendered but isn't. If I remove the <span> tags it works. This only happens when using {{{ in combination with embedded HTML tags.

[simplesmiler]

@BenRomberg Vue does somehow trim out spaces from the {{{ expression }}}, but you probably don't need triple braces in the first place, as you most likely don't want real <span> tags inside your <pre>, but rather want encoded <span>, which will display as <span>. And for that you need to use {{ expression }}: https://jsfiddle.net/simplesmiler/vr0hdg1h/

[BenRomberg]

@simplesmiler thanks for chiming in.

I'm aware of the implications of {{{ and my usage of it is indeed intended.

[simplesmiler]

@BenRomberg I don't get then why do you need the real <span>'s inside the <pre>. Syntax highlighting?

[BenRomberg]

Thanks, works like a charm!