在 VueJS 中渲染 [object HTMLTableElement]

Question

对于那些尝试过jsdifflib 的人来说，知道这个插件返回一个HTMLTableElement。现在我想尝试在我的 VueJS 组件上呈现/显示它。

我尝试了以下方法：

模板

<div class="diff-container" v-html="dynamicHtmlContent" ref="auditContainer"></div>

成分

export default {
    name: 'AuditView',
    data() {
      return {
        dynamicHtmlContent: null
      }
    },
    created() {
      // code logic here and there
      this.processDataDiff(results, 0);
    },
    methods: {
      processDataDiff: function (data, index) {
        // code logic here and there
        this.displayDiff(
          JSON.stringify(object1, null, 4).replace(/\\n/g, '\n'),
          JSON.stringify(object2, null, 4).replace(/\\n/g, '\n'),
          versionId1,
          versionId2
        );
      },
      displayDiff: function (baseDoc, newDoc, baseVersion, newVersion) {
        this.dynamicHtmlContent = auditService.getDiff(baseDoc, newDoc, baseVersion, newVersion);
      }
    }
}

ES6服务

 getDiff(baseTextRaw, newTextRaw, baseVersion, nextVersion) {
   // build the diff view and return a DOM node
   return difflib.buildView({
     baseText: baseTextRaw,
     newText: newTextRaw,
     // set the display titles for each resource
     baseTextName: 'Version ' + baseVersion,
     newTextName: 'Version ' + nextVersion,
     contextSize: 10,
     // set inine to true if you want inline
     // rather than side by side diff
     inline: false
   });
 }

我跳过了代码逻辑，但我已经检查了dynamicHtmlContent并且它返回为 HTML 对象，如下面的屏幕截图所示：

不知何故，使用 v-html 是不可能的，因为它只呈现一个对象 {}，如上所说console.log(typeof this.dynamicHtmlContent);那么我如何将它呈现给我的 Vue 组件？我也发现这很难转换为普通字符串。请帮我解决这个问题。

Answer 1

你仍然可以使用 v-html 你只需要改变你正在访问的内容。由于您返回的最终将成为一个实际的 DOM 元素，因此您可以做一些事情。

第一种是简单地更改 v-html 以访问元素的outerHTML属性

v-html="dynamicHtmlContent.outerHTML"

或者outerHTML直接保存到dynamicHtmlContent而不是DOM元素

this.dynamicHtmlContent = auditService.getDiff().outerHTML

您可以做的另一件事是通过访问您的引用来直接附加 DOM 元素auditContainerthis.$refs

displayDiff: function (baseDoc, newDoc, baseVersion, newVersion) {
  var table = auditService.getDiff(baseDoc, newDoc, baseVersion, newVersion);
  this.$refs.auditContainer.appendChild( table );
}

请注意，这必须在组件安装后完成，因为auditContainer尚未创建。意义：

created() {
  // code logic here and there
  this.processDataDiff(results, 0);
},

将改为：

mounted() {
  // code logic here and there
  this.processDataDiff(results, 0);
},

v-html 演示

v-html="dynamicHtmlContent.outerHTML"

this.dynamicHtmlContent = auditService.getDiff().outerHTML

DOM 附加演示

displayDiff: function (baseDoc, newDoc, baseVersion, newVersion) {
  var table = auditService.getDiff(baseDoc, newDoc, baseVersion, newVersion);
  this.$refs.auditContainer.appendChild( table );
}

created() {
  // code logic here and there
  this.processDataDiff(results, 0);
},