I am currently working on a project that involves a Symfony 5 and Vue 3 application. In this setup, a Symfony controller creates a form and provides its HTML through a JSON response. The code snippet below shows how the form HTML is returned as a string:
if ($request->isXmlHttpRequest()) {
$view = $this->renderView('vue/regForm.html.twig',[
'form' => $form->createView()
]);
return new JsonResponse([
'form' => $view,
]);
}
Within my Register.vue file, I have the following structure:
<template>
<h1>Selected Plan</h1>
<div id="post-form-holder" ref="form" v-on:submit.prevent="onSubmit"></div>
</template>
<script>
export default {
async mounted() {
let { data } = await this.$http.get("/register/get/" + this.$route.params.plan);
this.$refs.form.innerHTML = data.form
},
};
</script>
Everything is functioning correctly, and the form displays on the page successfully. However, I encountered an issue when attempting to include Vue syntax (such as
v-bind:class="{ 'has-error': hasError }"My question is, how can I ensure that the Vue syntax within the regForm.html.twig file renders properly when the form is displayed on the page in Vue 3?