Forms 使用'；v型&x27；在Vue中使用Symfony的表单

我正在制作一个后端为Symfony 5，前端为Vue 3的网站。 我是VueJS的新手。 在特定页面上，我有一个复杂的表单，它与数据库中的

实体链接。
有关表单的更多详细信息，请参见带有标签、选项的
类别
实体，每个选项都有允许的值。。。简而言之，我们的想法是使用Symfony表单及其魔力来编辑数据库中与该
类别相关的实体。
您可以想象，用户填写表单将是一场噩梦。这就是为什么我使用Vue作为用户和表单之间的接口

我创建了一个独立于symfony的vue应用程序。一切正常。但是当涉及到将Vue代码与Symfony链接时。。。
我的问题是，我希望能够得到一个隐藏在html中的symfony表单，vue可以填充它。这不是关于在表单中放入什么数据，而是获取表单本身

以下是我尝试过的：

第一次尝试

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应用程序中看到表单，但Vue忽略了与以前的
v-model='catLabel'
相同的问题

在这一点上，我放弃了，这就是我来找你的原因

如何在symfony表单中使用我的
v-model
？
Vue保存数据并控制您提供给它的dom元素，它不会从其中任何一个中提取数据。您应该在vue应用程序构造函数
新vue（{el:'#vue'，data:function（）{return{{{form.vars.value}json_encode（）}；}}}）中提供数据。
// Some html
// ...

<div id='app'>
</div>
  {{ form_start(categoryForm) }}
  {{ form_widget(categoryForm.label, {'attr' : {'v-model' : 'catLabel'}} ) }}
  {{ form_end(categoryForm) }}

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);
}

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;