3

I am new with VueJS and I want to use it with my Symfony plateform. I am wondering how I can add a VueJs Variable inside a twig variable.

Here is my example :

<div v-for="competition in Vcompetitions">
     <div class="thumbnail">
       <a v-bind:href="XXX">
         <img v-bind:src="competition.src">
       </a>
     </div>
</div>

Consider the desired twig path is: {{ path('name', {'id' : THEID })}},and the VueJs variable is competition.id I don't know what to do on XXX.

Thanks for your help

2 Answers 2

3

You can use FOSJsRoutingBundle, check the doc :

https://symfony.com/doc/current/bundles/FOSJsRoutingBundle/installation.html https://symfony.com/doc/current/bundles/FOSJsRoutingBundle/usage.html

0
0

You can try something like this

Step 1: You can change vuejs delimiters {{ }} to ${ }

           $(document).ready(function () {
                var app = new Vue({
                    delimiters: ['${', '}'],
                    el: '#app',
                    data: {
                        competition: {"id":1},
                    },
                });
            });

Step 2: Now you can use something like bellow in your twig file
For vuejs variable ${competition.id} and for twig variable {{competition.id}}. In your case {{ path('name', {'id' : ${competition.id} })}}

6
  • This doesnt work, Im getting Unexpected character "$" error. I did this <a href="{{ path('slug' , {'slug' : ${ competition.slug} })}}">
    – felgharb
    Jul 20, 2017 at 11:54
  • can you change delimiters delimiters: ['${', '}'], ? Jul 20, 2017 at 11:58
  • Can you please show your app.js or main app js file Jul 20, 2017 at 12:12
  • Sorry I dont have main app js File, I only the the JS code above.
    – felgharb
    Jul 20, 2017 at 12:46
  • I say about those file, where you initialize your vuejs code! Jul 20, 2017 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.