Escape VueJS data binding syntax in Laravel Blade?

Question

Laravel templating language Blade and VueJS data binding syntax are very similar.

How can I escape VueJS data binding syntax when in a *.blade.php file?

Answer 1

In order to output real HTML, you will need to use the v-html directive:

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Answer 2

While asking the question I discovered that you can escape Laravel's Blade by prepending an @ sign before the double brackets {{}} or the {!! !!} html rendering brackets.

So here is the answer:

<div>
  <!-- HTML rendering with VueJS -->
  @{{ selectedQuestionDesc }} 
  <!-- Data binding with VueJS -->
  @{{ selectedQuestionDesc }}
</div>
<div>
  <!-- HTML with Laravel Blade -->
  {!! $selectedQuestionDesc !!}
  <!-- Variable binding with Laravel Blade -->
  {{ $selectedQuestionDesc }} 
</div>