Визуализация и компиляция строки с использованием vue.js - PullRequest
Новая
       8

Визуализация и компиляция строки с использованием vue.js

0 голосов
/ 10 февраля 2019

Существует требование, когда все элементы 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

Есть ли способ заставить эту работу?

1 Ответ

0 голосов
/ 10 февраля 2019

Вы пытаетесь скомпилировать строку как шаблоны Vue с использованием v-html.

Обратите внимание, что содержимое вставляется в виде простого HTML - оно не будет скомпилировано как шаблоны Vue

Читайте о v-html в Vue Docs .

В качестве решения вы можете прочитать эту статью

Вы нене хотите использовать библиотеку?Проверьте код ниже:

Сначала создайте файл 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

...