how to use a path twig in vueJS with Proyect Symfony - how to correctly use FSRouting

Question

I have a Vue code but I need to show a link in twig:

<template>
<div class="col t-blk text-center d-flex justify-content-around">                                                       
<a class="btn btn-primary btn-md border-r-0 d-table py-2 px-4" href="{{path('corpasesoria')}}">Con Asesor</a>
<a class="btn btn-primary btn-md border-r-0 d-table py-2 px-4" id="step01-tab" data-toggle="tab" href="#step01" role="tab" aria-controls="step01" aria-selected="false">Sin Asesor</a>
</div>
</template>

But when compiling webpack it shows an error in the link of twig and can not be advanced.

This is the error:

ERROR  Failed to compile with 1 errors                                                                     00:58:12

 error  in ./assets/components/Corporativo/Corporativo.vue?vue&type=template&id=270a4b6a&scoped=true&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  href="{{path('corpasesoria')}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

  15 |                                                                                          <div class="row">
  16 |                                                                                                  <div class="col t-blk text-center d-flex justify-content-around">
  17 |                                                                                                          <a class="btn btn-primary btn-md border-r-0 d-table py-2 px-4" href="{{path('corpasesoria')}}">Con Asesor</a>
     |                                                                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  18 |                                                                                                          <a class="btn btn-primary btn-md border-r-0 d-table py-2 px-4" id="step01-tab" data-toggle="tab" href="#step01" role="tab" aria-controls="step01" aria-selected="false">Sin Asesor</a>
  19 |

Do you have any idea?

This is the error: href="{{path('corpasesoria')}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">. — juanitourquiza
– juanitourquiza, Commented Jun 12, 2019 at 6:01
Possible duplicate of Conflict on Template of Twig and Vue.js — DarkBee
– DarkBee, Commented Jun 12, 2019 at 6:03

slmder_h · Accepted Answer · 2019-06-13 15:56:48Z

1

Here is an example

import RoutingData from '../../../../dist/js/fos_js_routes';

import Routing from 'fos-routing';

Routing.setData(RoutingData); export default Routing;

answered Jun 13, 2019 at 15:56

slmder_h

2011 silver badge4 bronze badges

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

5 Comments

juanitourquiza Over a year ago

Now . I configure all but this is the error: "Error: "The route "corpasesoria" does not exist."" In vuejs this is the code: methods : { conAsesor: function (event) { alert('Hello !') Routing.generate('corpasesoria'); }} What is the problem?

slmder_h Over a year ago

You need to dump your routes every time you add new route as described symfony.com/doc/master/bundles/FOSJsRoutingBundle/usage.html

juanitourquiza Over a year ago

yes, this is the route in my controller: /** * @Route("/corporativo/asesoria", * options = { "expose" = true }, * name = "corpasesoria", * ) */ What is the problem??

slmder_h Over a year ago

Read documentation symfony.com/doc/master/bundles/FOSJsRoutingBundle/usage.html. And dump your routes

juanitourquiza Over a year ago

Thanks. Now all work perfect. I'm going to correct the answer

slmder_h · Accepted Answer · 2019-06-12 19:20:22Z

0

You ca try to use fosjsrouring bundle to generate links inside js https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

answered Jun 12, 2019 at 19:20

slmder_h

2011 silver badge4 bronze badges

2 Comments

juanitourquiza Over a year ago

I use this form in twig: Routing.generate('your_route_with_params', { param: varJavascript }); How use this routes in VueJS???

slmder_h Over a year ago

Usage is same in any js environment.

juanitourquiza · Accepted Answer · 2019-06-19 13:39:32Z

Thanks to the help of slmder-h First you need to install: npmjs.com/package/fos-routing

npm install fos-routing --save

Then you need to read the symfony documentation: https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/usage.html

After in the terminal

# Symfony Flex
bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

Inside the file .vue or .js

const routes = require ('../../ public / js / fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData (routes);
Routing.generate ('asesoriajson');

Finally the Controller:

/**
 * @Route("/corporativo/asesoriajson",
 *     options = { "expose" = true },
 *     name = "asesoriajson",
 *       
 * )
 */
 public function asesoriajson(Request $request, SendMail $Sendmail)
 {
    $response = array();
    $response['type'] = null;
    $response['title'] = null;
    $response['message'] = null;

    $response['type'] = 'success';
    $response['title'] = 'Success';
    $response['message'] = 'Usted decidio utilizar un asesor'; 
    return new JsonResponse($response, 200);                    
}

Collectives™ on Stack Overflow

how to use a path twig in vueJS with Proyect Symfony - how to correctly use FSRouting

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related