Question

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

2019-02-10

8168

vue.js vuejs2 vue-component

要求所有 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 模板。

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates

在 Vue 文档中阅读有关 v-html 的信息。

作为解决方案，您可以阅读这篇文章

You don't want to use a library? Checkout the code below:

首先创建一个 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 示例