union-question-web/src/components/RichText.vue

<template>
  <div class="rich-text"></div>
</template>

<script>
import { renderRichText } from "./vEditor/renderJSON";

export default {
  name: "RichText",
  props: {
    textJson: {
      type: [String, Object],
      default() {
        return { sections: [] };
      },
    },
  },
  data() {
    return {};
  },
  watch: {
    textJson(val) {
      this.renderVal(val);
    },
  },
  mounted() {
    this.renderVal(this.textJson);
  },
  methods: {
    getJson(val) {
      let json = null;
      try {
        json = JSON.parse(val);
      } catch (e) {
        console.log("not json");
      }
      return json;
    },
    renderVal(val) {
      if (typeof textJson === "string") {
        this.$el.innerHTML = val;
      } else {
        renderRichText(val, this.$el);
      }
    },
  },
};
</script>