Displaying Curly Braces in Vue App
<div class="post" v-pre>
<pre>
<code>
<p>{{ $name }}</p>
</code>
</pre>
</div>
I was running into an issue where my code blocks were not being rendered in my page. I would have something like this:
<div class="post">
<pre>
<code>
<p>{{ $name }}</p>
</code>
</pre>
</div>
Now, when this post was rendered inside of a Vue application, it would return an error resulting in a blank white page. That's because Vue was trying to render {{ $name }}
, and it was failing.
How to fix: Simply add the v-pre
attribute to the container element, and Vue will not render any code inside that element.
<div class="post" v-pre>
<pre>
<code>
<p>{{ $name }}</p>
</code>
</pre>
</div>
So, next time you run into this issue, make sure to reach for the v-pre
attribute.
No explanation generated yet.