如何使用来自 Axios GET 的 Vue 语法渲染 HTML 字符串？

Question

I have a Symfony 5 and Vue 3 app, a Symfony controller is creating a form and providing its HTML through a JSON response, which is gibing me the form HTML as a string like so

if ($request->isXmlHttpRequest()) {
    $view = $this->renderView('vue/regForm.html.twig',[
        'form' => $form->createView()
    ]);

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

In my Register.vue file, I have

<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>

This is all working and the form is output onto the page successfully etc. My problem comes when I add some Vue syntax to the form in regForm.html.twig file, (eg. v-bind:class="{ 'has-error': hasError }" ) the Vue syntax obviously does get rendered when using innderHTML.

Basically, how can I get the Vue syntax within regform.html.twig to render when the form is placed on the page in Vue 3.

Answer 1

There is the v-html directive. Check this https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML