how to escape curly braces in vue.js

Question

I have data in my database that may contains curly braces{{ }}.

{{-- inside app.blade.php --}}
<!-- vue app -->
<div id="app">
    ...code
    <div> {{ $data }} </div>
    ...code
</div>

so if I want to display it to the user this data cause problem if it's inside Vue app. and vue think it's javascript codes to execute.

for example if the $data is equal to {{ title->links() }} then I get an error and the whole app doesn't compile at all. (it passes the blade template).

[Vue warn]: Error compiling template:

invalid expression: expected expression, got '>' in

    _s(title->links())

  Raw expression: {{ title->links() }}

305|              <div>{{ title-&gt;links() }}</div>
   |                   ^^^^^^^^^^^^^^^^^^^^^^^

what is the best way to escape {{ }} curly braces for user data (in Vue.js)??

Michaeu

Answer 1

You need use the v-pre or v-html directive:

<div v-pre>{{ data }}</div>

or

<div v-html="'{{ data }}'"></div>

Marylyn

u r in app.blade.php so when both vuejs and laravel try to compile so u need to tell laravel ignore this – Marylyn

@{{ $data }} will ignore the whole data. I want to show it to the user not hiding it. – Michaeu

can u put where are adding $data.? – Marylyn

$data is a variable that comes from the database and it's the user input. that may contains curly braces. it passes the blade template but not vue template. – Michaeu

so basically . $data have html or row text .? – Marylyn