Tengo < wentdata en mi < que puede contener llaves {{ }}.

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

Entonces, si quiero mostrárselo al usuario, estos datos causan problemas si están dentro de la aplicación Vue. y creo que son códigos javascript para ejecutar.

Por ejemplo, si $data es igual a {{ title->links() }}, aparece un error y toda la aplicación no se compila en absoluto. (pasa la plantilla de la cuchilla).

[Vue warn]: Error compiling template:

invalid expression: expected expression, got '>' in

    _s(title->links())

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

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

¿Cuál es la mejor manera de escapar de las llaves {{ }} para los datos del usuario (en Vue.js)?

1
alien 27 ago. 2020 a las 13:37

1 respuesta

La mejor respuesta

Necesita usar la directiva v-pre o v-html:

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

O

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

Enlace de referencia https://vuejs.org/v2/api/#v-pre

2
Kamlesh Paul 27 ago. 2020 a las 10:56