Question

我开始使用Twig模板化的Symfony 4和用于UI组件的VueJS。

我在.vue文件中有一个非常基本的组件，用于列出当前呈现基本表的任务。

// task-list.vue

<template>
    <div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>
                    Task
                </th>
                <th>
                    Description
                </th>
                <th>
                    Completed?
                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="task in parsedTasks">
                <td>
                    {{ task.title }}
                </td>
                <td>
                    {{ task.description }}
                </td>
                <td>
                    {{ task.completed ? 'Yes' : 'No' }}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
      name: 'task-list',
      props: {
        tasks: {required: true}
      },
      computed: {
        parsedTasks() {
          return JSON.parse(this.tasks);
        }
      },
    };
</script>

此组件已在根JS文件中注册;

// assets/js/app.js

Vue.component('task-list', TaskList);

new Vue({
  el: '#app-root'
});

然后在Twig模板中使用它;

// tasks/list.html.twig

...
<task-list tasks="{{ tasks | json_encode }}"></task-list>
...

我希望能够使用path() Twig函数，以便在单击任务列表中的行时，将用户重定向到生成的路径/路径。如果Vue组件不在Twig文件中，这可能吗？

作为一个附带问题，是否有更好的方法将Twig变量传递给Vue组件而不是json编码，然后解析上面的数据？

Answer 1

有两种主要方法：在后端生成URL并在javascript中使用它：

var route = "{{ path('blog_show', {'slug': 'my-blog-post'})|escape('js') }}";

https://symfony.com/doc/current/routing/generate_url_javascript.html

或者使用与FOSJsRouting等symfony路由集成的javascript路由库：

var url = Routing.generate('blog_show', {
    'slug': 'my-blog-post'
});

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle

Symfony 4，Twig＆amp; VueJS - 重定向到Vue组件

1 个答案: