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

Posted 2023-02-16

【中文标题】如何使用来自 Axios GET 的 Vue 语法渲染 HTML 字符串？

【英文标题】：How to render HTML string with Vue syntax coming from Axios GET?

【发布时间】：2021-10-06 17:28:50

【问题描述】：

我有一个 Symfony 5 和 Vue 3 应用程序，Symfony 控制器正在创建一个表单并通过 JSON 响应提供它的 html，这让我将表单 HTML 当作这样的字符串

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

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

在我的 Register.vue 文件中，我有

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

这一切正常，表单成功输出到页面等。当我在 regForm.html.twig 文件中的表单中添加一些 Vue 语法时，我的问题出现了（例如v-bind:class=" 'has-error': hasError "），Vue 语法显然是使用 inderHTML 时被渲染。

基本上，当表单放置在 Vue 3 中的页面上时，如何在 regform.html.twig 中获取 Vue 语法。

【问题讨论】：

使用v-html v3.vuejs.org/api/directives.html#v-html

v-html 在这里无济于事，因为它旨在呈现纯 HTML，而不是部分 Vue 模板...

【参考方案1】：

有v-html 指令。 检查这个https://vuejs.org/v2/guide/syntax.html#Raw-HTML