How to use symfony routing with vuejs?

Question

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

FAROUK BLALOU · Accepted Answer · 2017-07-20 10:07:40Z

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

answered Jul 20, 2017 at 10:07

FAROUK BLALOU

7381 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yashvantsinh Zala · Accepted Answer · 2017-07-20 10:10:14Z

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} })}}

answered Jul 20, 2017 at 10:10

Yashvantsinh Zala

5311 gold badge3 silver badges11 bronze badges

6 Comments

felgharb Over a year ago

This doesnt work, Im getting Unexpected character "$" error. I did this <a href="{{ path('slug' , {'slug' : ${ competition.slug} })}}">

Yashvantsinh Zala Over a year ago

can you change delimiters delimiters: ['${', '}'], ?

Yashvantsinh Zala Over a year ago

Can you please show your app.js or main app js file

felgharb Over a year ago

Sorry I dont have main app js File, I only the the JS code above.

Yashvantsinh Zala Over a year ago

I say about those file, where you initialize your vuejs code!

|

Collectives™ on Stack Overflow

How to use symfony routing with vuejs?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related