How to ignore an html element in vuejs

Question

How to prevent Vue.js from running code within the < code > tags produced by markdown? It's a Laravel 5.5 + Vue.js 2.x project with 'andreasindal/laravel-markdown' package for markdown. The code that's Vue is trying to run is actually a Laravel Blade directive and it seems that Blade itself doesn't try to process it (since I'm getting a Vue error regarding this in the console).

{{ session('notificationType') }}

I tired modifying the Parsedown.php class (which is used by 'andreasindal/laravel-markdown') to replace all the '{' with the HTML ASCII characters. The replacement did work, but Vue still processed those.

Answer 1

If you do not want Vuejs to evaluate anything inside an HTML element you can use the v-pre directive as:

<code v-pre> {{ name }} </code>

In the above example vue will ignore everything inside the tags so, the name variable won't be evaluated and everything will be rendered as is.

^{* more on v-pre}