如何在 Vue.js 中呈现 Symfony 表单？

Question

我是 Vue Js 初学者，刚开始使用 Symfony 4 来使用 Vue Js，我在 Vue.js 中遇到表单渲染问题。

App.js

import Vue from 'vue'
import App from './Components/App.vue'
import PostForm from './Components/PostForm.vue'

new Vue({

el: '#app',
components: { App },
PostForm
})

PostForm.vue

<template>

<div>

    <h2 class="text-center">Post</h2>
    <div id="post-form-holder" ref="form">

    </div>
</div>

</template>

<script>

import axios from 'axoios'

export default {

    async mounted(){

        let {data} = await axios.get('/SymVue/post')
        this.refs.form.innerHtml = data.form
    }
}

</script>

控制器

    /**
*
* @Route("/post", name="post.form")
*/
public function formAction(){

    $form = $this->createForm(PostType::class);

    $view = $this->renderView('vue/form.html.twig',[

        'form' => $form->createView()
    ]);
    return new Response('This is response');

}

在运行http://localhost:8000/SymVue/post，浏览器显示响应消息'This is response'

Answer 1

使用呈现的模板作为响应主体。 :)

$view = $this->renderView('vue/form.html.twig',[

        'form' => $form->createView()
    ]);

 return new JsonResponse(['form' => $view]);

Answer 2

如果您运行 http://localhost:8000/SymVue/post 那么显然您会在浏览器中看到响应。据我所知，应该有两种方法。在你的情况下。第一种方法将在浏览器中呈现表单，第二种方法将创建表单...

像这样....

 /**
 * @Route("/", name="vue", methods={"GET", "POST"})
 */
public function index()
{
    return $this->render('vue/index.html.twig');
}



/**
*
* @Route("/post", name="post.form")
*/
public function formAction(){

    $form = $this->createForm(PostType::class);

    $view = $this->renderView('vue/form.html.twig',[

        'form' => $form->createView()
    ]);
return new Response('This is response');

}

说到你的 app.js 我猜你搞砸了，但不管怎样，如果你想在 PostForm.vue 中渲染，你可以这样做。在 js 文件夹中创建 post.js 并编写以下代码..

import Vue from 'vue'
import PostForm from './Components/PostForm.vue'

new Vue({

    template: '<PostForm />',
    components: { PostForm }

}).$mount('#postForm');

而在你的PostForm.vue（在你的代码中有一些拼写错误）

import axios from 'axios'
import 'babel-polyfill'

export default {

    name: 'PostForm',

    async mounted(){

        let {data} = await axios.get('/SymVue/post')            
        this.$refs.form.innerHTML = data.form
    }
}

现在回到 vue/index 中的 Twig 模板。html.twig

{% block body %}

    <div id="postForm">

        <PostForm />

   </div>

{% endblock %}

    {% block javascripts %}


        <script src="{{ asset('build/postForm.js') }}"></script>

    {% endblock %}

不要忘记在 webpack.config.js

中添加条目

.addEntry('postForm', './assets/js/post.js')

Answer 3

如果您想将 VueJs 与 Symfony 一起使用，我不建议您像之前的答案那样通过 symfony 传递 html 代码，您会弄乱应用程序模板并执行 1 个额外请求。您最好像往常一样在 html/vue 代码中创建一个表单并手动传递 csrf 代码。如果您仍想使用 symfony 生成表单，只需像这样使用插槽传递它：

<some-vue-component>
   <div slot="form">
       {{ form(form) }}
   </div>
</some-vue-component>

您也可以看一下 small vue component 我为这种情况编写的使用 FOSRestBundle 自动显示表单错误的文章。您还可以使用连接器实施同步器令牌模式或任何其他保护类型。

如何在 Vue.js 中呈现 Symfony 表单？

How to render Symfony Form in Vue.js?

symfony-forms

vue.js

vue-component

symfony4