Exclude VueJS data binding syntax in Laravel Blade?

Question

Laravel Template Language. Blade and VueJS data binding syntax is very similar.

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

Example:

 <div> <!-- Want it with VueJS --> {{ selectedQuestionDesc }} </div> <div> <!-- Want it with Laravel Blade --> {{ $selectedQuestionDesc }} </div> 

Answer 1

Asking a question, I found that you can avoid Laravel Blade by adding an @ sign in front of double brackets {{}} or {!! !!} {!! !!} {!! !!} {!! !!} HTML parenthesis rendering.

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> 

Answer 2

To output real HTML you will need to use the v-html directive:

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