问题描述
我正在创建一个网站，后端使用Symfony 5，前端使用Vue 3。
我是VueJS的新手。
在特定页面上，我有一个与数据库中的Entity链接的复杂表格。
有关带有标签，选项的Category实体的表单的更多详细信息，简而言之，想法是使用Symfony表单及其魔术来编辑与此{{ 1}}在我的数据库中。
可以想象，用户填写表单将是一场噩梦。这就是为什么我将Vue用作用户和表单之间的接口的原因。
我创建了一个独立于symfony的vue应用。一切正常。但是当涉及到将Vue代码与Symfony链接时... 我的问题是，我希望能够在vue可以填充的html中获取一个symfony表单。不是要在表单中放入什么数据，而是要获取表单本身。
这是我尝试过的：
第一次尝试。
Category使用此解决方案时，在此div上安装Vue应用程序时，div'#app'的内容将被完全清除。所以我将表单放在div元素之外：
category/new.html.twig
// Some html
// ...
<div id='app'>
{{ form_start(categoryForm) }}
{{ form_widget(categoryForm.label,{'attr' : {'v-model' : 'catLabel'}} ) }}
{{ form_end(categoryForm) }}
</div>
但是Vue忽略了div'#app'之外的内容，因此我使用一些错误代码将其移入了vue应用内部：
// Some html
// ...
<div id='app'>
</div>
{{ form_start(categoryForm) }}
{{ form_widget(categoryForm.label,{'attr' : {'v-model' : 'catLabel'}} ) }}
{{ form_end(categoryForm) }}
然后是，我的表单位于我的vue应用程序中！可是等等 ？ app.vue
<template>
// Some vue code
// ...
<div id="form_container"></div>
</template>
// Some other vue code
// ...
mounted : function {
const form = document.getElementById('form_category');
form.parent.removeChild(form);
const container = document.getElementById('form_container');
container.addChild(form);
}
中给出的v-model属性被完全忽略 ...实际上，使用Firefox的检查器，我在标签输入中看到的格式为new.html.twig 。如您所见： v-model =“ catLabel” ，但是在修改<input type=\"text" id="category_label" name="category[label]" required="required" v-model="catLabel">'时，它没有填写输入内容...
我最后的尝试是做同样的技巧，但是有一个更简洁的选择：AJAX请求表单：
catLabel}，
使用此代码，我可以在Vue应用程序中看到该表单，但是与以前的mounted: async function() {
const url = this.$el.parentNode.attributes['data-form-url'].value;
const response = await axios.get(url)
const form = document.forms['category'];
if(form)
form.innerHTML = response.data;
相同的问题被Vue忽略了。
这时我放弃了，这就是为什么我来找你。
如何在symfony表单中使用v-model='catLabel'？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）