javascript - Conflicto en la plantilla de Twig y Vue.js
symfony (10)
Estoy haciendo un programa usando Slim 2 que usa Twig como mi motor de plantillas.
usa la sintaxis
{{ foo }}
en el archivo php.
Por otro lado, estoy usando vue.js, también usa
{{ bar }}
.
P.ej
Voy a hacer el enlace bidireccional, a continuación está mi código html.
<div class="container">
Label Value: <label>{{ foo }}</label><br>
Field Value: <input v-model="foo">
</div>
y aquí está mi código vue js.
new Vue({
el: ''.container'',
data: {
foo: ''Hello world.''
}
});
Entonces, el mundo Hello debería estar en el valor de la etiqueta.
La salida es la imagen de abajo.
Lo que no funcionó, probablemente el sistema pensó que era una variable ramita. Así que verifiqué pasando variable en una vista.
$app->get(''/'', function() use ($app) {
$app->render(''login.php'', [
''foo'' => ''FROM PHP FILE''
]);
})->name(''login'');
Así que verifiqué, el Valor de la etiqueta: muestra la variable que pasé del archivo PHP que no está en el código VUE.
Es difícil de explicar pero entiendes el punto.
Me preguntaba cómo omitir la plantilla de twig y usar
{{ }}
de vue también.
Además, para aquellos que no quieren cambiar el delimitador de vue, puede cambiar el delimitador de Twig (usando el framework Silex php en este ejemplo):
$app->before(function() use ($app){
$app[''twig'']->setLexer( new Twig_Lexer($app[''twig''], [
''tag_comment'' => [''[#'', ''#]''],
''tag_block'' => [''[%'', ''%]''],
''tag_variable'' => [''[['', '']]''],
''interpolation'' => [''#['', '']''],
]));
});
https://twig.symfony.com/doc/2.x/recipes.html#customizing-the-syntax
En este caso, puede cambiar el marcador de etiqueta vue.js (si lo hay) o usar la etiqueta textual twig (mucho mejor en mi opinión) que marca una sección como texto sin procesar que no debe ser evaluado por twig parser. es decir:
{% verbatim %}
new Vue({
el: ''.container'',
data: {
foo: ''Hello world.''
}
});
{% endverbatim %}
De los documentos de la ramita:
La etiqueta textual marca las secciones como texto sin formato que no debe analizarse. Por ejemplo, para poner la sintaxis de Twig como ejemplo en una plantilla, puede usar este fragmento:
En lugar de cambiar delimitadores, hacer que los componentes sean menos reutilizables o usar mecanismos de doble escape menos legibles, puede usar la función
source
de Twig.
La función fuente devuelve el contenido de una plantilla sin representarla:
{{ source(''template.html'') }} {{ source(some_var) }}
Ejemplo:
<!-- path/to/twig_template.html.twig -->
<script type="text/x-template" id="my-template">
{{ source(''path/to/vue-template.html'') }}
</script>
<script>
Vue.component(''my-component'', {
template: ''#my-template''
});
</script>
Esto está probado y funciona: vue js vars en la plantilla de ramita:
new Vue({
el: ''#app'',
delimiter: [''{}''], // any delimiter you would like
})
Estoy usando VueJs v2, con la sintaxis a continuación:
<img id="bookCover" style="border:none;width:200px" :src="book.cover">
Donde book.cover es uno de los campos myVueInstance. $ Data.book.
La mejor solución es no cambiar ninguno de los delimitadores.
Puede usar el marcado vuejs en ramita de esta manera
{{ mytwigvar }} {{ ''{{'' }} myvuevar {{ ''}}'' }}
Obviamente, esto es subóptimo, así que redefina su cargador de ramitas para preprocesar archivos y reemplace
{{{
con
{{ ''{{'' }}
y
}}}
con
{{ ''}}'' }}
luego puede escribir el marcado como
{{ mytwigvar }} {{{ myvuevar }}}
Mucho más bonito.
Leí en otra pregunta similar que hacer:
{{"{{vue.js variable here}}"}}
para hacerlo más corto. Funciona en ALGUNOS casos para mí. Pero, pensé que te gustaría verlo de todos modos ...
Todavía no logré que funcione en todas las áreas de mi código.
Para Vue JS 2 (no estoy seguro acerca de 1). Puedes usar:
<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>
Según la documentación: https://vuejs.org/v2/api/#v-text
Solo un aviso. En Vue JS 2. La forma de hacerlo es agregar un objeto a Vue.
new Vue({
el: ''#app'',
delimiters: [''${'', ''}''],
}