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?

Example:

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

Hasta Dhana · Accepted Answer · 2019-05-24 03:05:17Z

44

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>

edited May 24, 2019 at 3:05

Hasta Dhana

4,6947 gold badges21 silver badges28 bronze badges

answered Jun 21, 2016 at 1:12

Gus

7,7059 gold badges40 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

calbear47 Over a year ago

On the third line of your answer...can you fix that so there are 2 brackets on each side of the binding instead of 3. The edit it too small for me

Gus Over a year ago

@calbear47 can you write an example on a comment and a short description of why the update, please.

calbear47 Over a year ago

@{{{ selectedQuestionDesc }}} should be @{{ selectedQuestionDesc }}

Afraz Ahmad · Accepted Answer · 2018-02-08 15:46:52Z

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>

answered Feb 8, 2018 at 15:46

Afraz Ahmad

5,41633 silver badges40 bronze badges

Collectives™ on Stack Overflow

Escape VueJS data binding syntax in Laravel Blade?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related