有没有办法在Vue中验证HTML语法？

Question

我有一个组件，它基本上从输入中获取所有内容并呈现html：

<template>
    <div>
        <input type="text" v-model="html">
        <VRuntimeTemplate :template="html" />
    </div>
</template>

<script>
import VRuntimeTemplate from 'v-runtime-template'

export default {
    data: () => ({
        html: ''
    }),
    components: {
        VRuntimeTemplate
    }
}
</script>

现在，当我开始输入时，它显然会向我抛出错误，说输入值没有结束或结束标记。

有没有办法事先验证HTML？它适用于v-html，但第三方模块存在问题。

沙盒：https://codesandbox.io/s/vruntimetemplate-27bdz?fontsize=14

Answer 1

您需要将其包装在div中才能工作，请遵循下面的示例

<v-runtime-template :template="`<div>${template}</div>`"/>

Answer 2

根据需要验证HTML的时间，有几个选项。

要动态验证输入，您可以遵循以下答案：检查HTML片段是否对JavaScript有效

如果要验证Vue组件的HTML输出，此处有一个Vue cli插件：https://gitlab.com/html-validate/html-validate-vue

我遇到了同样的问题，最终选择了第一个选项，因为我需要验证用户提供的超文本标记语言，这些语言将在另一个vue应用程序中发出。