Menu
I'm doing a program using Slim 2 that uses Twig as my templating engine. so It uses the syntax {{ foo }} in php file. On the other hand, I'm using vue.js, it also uses {{ bar }}.
E.g.
I'm gonna do the two way binding, below is my html code.
<div class="container"> Label Value: <label>{{ foo }}</label><br> Field Value: <input v-model="foo"> </div> and here is my vue js code.
new Vue({ el: '.container', data: { foo: 'Hello world.' } }); So the Hello world should be in the Label Value.
The output is the image below.
Which it did not worked, probably the system thought it's a twig variable. So I checked by passing variable in a view.
$app->get('/', function() use ($app) { $app->render('login.php', [ 'foo' => 'FROM PHP FILE' ]); })->name('login'); So I checked, the Label Value: shows the variable that I passed from the PHP file not on the VUE code.
Kind of hard to explain but you get the point. Was wondering how to bypass twig's template and use the {{ }} from vue also.
576
Use single file components if you can. If you come from React you can also find jsx for Vue useful, or even write render function by hand (though not recommended). If you want to totally nullify the time of the first rendering though, the only way to go is to do server-side rendering.
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
The templating language is tightly coupled into Vue. js. Like many other templating engines, it uses double curly braces {{ }} to bind data to your template. That means the information in our data variable we pass after our new Vue statement is immediately available inside our application.
Just change default delimiters for vue. Here's how:
Define delimiters globally (docs).
Vue.config.delimiters = ['${', '}'] Define delimiters for component (docs).
new Vue({ delimiters: ['${', '}'] }) Define delimiters for application (docs).
Vue.createApp({ delimiters: ['${', '}'] }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
