Как визуализировать Symfony Form в Vue.js? - PullRequest
Новая
       39

Как визуализировать Symfony Form в Vue.js?

0 голосов
/ 04 февраля 2019

Я начинающий Vue Js и только что запустил Vue Js с Symfony 4, и у меня возникают проблемы с рендерингом форм в 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, браузер отображает ответное сообщение «Это ответ»

Ответы [ 3 ]

0 голосов
/ 05 февраля 2019

Если вы запустите http://localhost:8000/SymVue/post, то, очевидно, вы увидите ответ в браузере.Насколько я знаю, там должно быть 2 метода.В твоем случае.Первый метод отобразит форму в браузере, а второй создаст форму ...

Вот так .... 

 /**
 * @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.Создайте post.js в папке 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
    }
}

Теперь возвращаемсяк шаблону Twig в вашем vue / index.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')
0 голосов
/ 21 апреля 2019

Если вы хотите использовать VueJ с Symfony, я не предлагаю вам передавать HTML-код через Symfony, как в предыдущих ответах, вы испортите шаблоны приложений и сделаете 1 дополнительный запрос.Вам лучше создать форму как обычно в html / vue-коде и передать код csrf вручную.Если вы все еще хотите сгенерировать форму с использованием Symfony, просто передайте ее, используя слоты, например: 

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


Вы также можете взглянуть на small vue component Я написал длятакие случаи для автоматического отображения ошибок формы с помощью FOSRestBundle.Также вы можете реализовать Synchronizer Token Pattern или любой другой тип защиты с соединителем.

0 голосов
/ 04 февраля 2019

Использовать представленный шаблон в качестве тела ответа.:) 

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

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

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