Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Escape VueJS data binding syntax in Laravel Blade?

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?

Example:

<div>
  <!-- Want it with VueJS -->
  {{ selectedQuestionDesc }}
</div>
<div>
  <!-- Want it with Laravel Blade -->
  {{ $selectedQuestionDesc }}
</div>
like image 379
Gus Avatar asked Jun 21 '16 01:06

Gus


1 Answers

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>
like image 55
Gus Avatar answered Sep 24 '22 02:09

Gus