使用 vue.js 渲染和编译字符串

Question

要求所有 html 元素都在 JSON 文件中定义并在模板中使用。

有一个功能 - “markComplete”需要在复选框更改时触发。

代码模板：

<template>
<span v-html="htmlContent"></span>
</template>

<script>
 data(){
        return{
        htmlContent: "<input type='checkbox' v-on:change='markComplete'>"
        }
    }
</script>

上面的代码无法工作，因为onChange 事件不会被挂载，我得到 Uncaught ReferenceError: markComplete is not defined

有什么办法可以做到吗？

Answer 1

您正在尝试使用 v-html 将字符串编译为 Vue 模板。

注意，内容是作为纯 HTML 插入的——它们不会被编译为 Vue 模板

在Vue Docs 中了解 v-html。

作为解决方案，您可以阅读this article

您不想使用库？查看以下代码：

先创建一个js文件（最好是RenderString.js）：

import Vue from "vue"

Vue.component("RenderString", {
  props: {
    string: {
      required: true,
      type: String
    }
  },
  render(h) {
    const render = {
      template: "<div>" + this.string + "</div>",
      methods: {
        markComplete() {
          console.log('the method called')
        }
      }
    }
    return h(render)
  }
})

然后在你的父组件中：

<template>
  <div><RenderString :string="htmlContent" /></div>
</template>

<script>
import RenderString from "./components/RenderString"

export default {
  name: "App",
  data: () => ({
    htmlContent: "<input type='checkbox' v-on:change='markComplete'>"
  })
}
</script>

注意：我没有运行上面的代码，但我创建了一个类似的工作 CodeSandbox Example