vue.js - 如何在 Vue.js 中渲染 Symfony 表单?
问题描述
我是 Vue Js 初学者,刚刚使用 Symfony 4 开始了 Vue Js,我在 Vue.js 中的表单渲染遇到问题。
应用程序.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时,浏览器显示响应消息“这是响应”
解决方案
如果你运行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.html.twig 中的 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')
推荐阅读
- html - 调整初始 100vh 容器的大小
- javascript - AngularJS - 工具提示不起作用
- excel - Excel 宏执行多列排序
- javascript - Electron:在 BrowserWindow 和呈现的 URL 之间进行通信(nodeIntegration:false)
- excel - VBS for Excel to count and specific word and use it for a loop
- node.js - PM2 会与 Node.js 网络 API 一起使用吗?
- ffmpeg - ffmpeg 即时使用调整大小的图像
- zapier - Zapier - 输入数据排序
- python - 如何在磁盘上保留大量 numpy 矩阵
- sql - SQL:[table_name] AS [alias_name] 给出错误“找不到存储过程 'table_name'”