for those of you that have tried jsdifflib know that this plugin returns an HTMLTableElement. Right now I want to try to render/display this on my VueJS component.
I've tried the following:
TEMPLATE
<div class="diff-container" v-html="dynamicHtmlContent" ref="auditContainer"></div>
COMPONENT
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 service
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
});
}
I've skipped the code logic but I already checked the dynamicHtmlContent and this returns to as an HTML Object as seen on the screenshot below:
Somehow this isn't possible using v-html as it only renders an object {} as said on console.log(typeof this.dynamicHtmlContent);
So how do I render this to my Vue Component? I also find this hard to convert into a plain string. Please help me on this.
You can still use v-html you just have to change what you are accessing. Since what you get back is going to end up being an actual DOM element you can do a couple of things.
The first is to simply change v-html to access the
outerHTML
property of your elementOr save
outerHTML
directly todynamicHtmlContent
instead of the DOM elementThe other thing you can do is directly append the DOM element by accessing your
auditContainer
reference throughthis.$refs
Note though this would have to be done after the component has been mounted as the
auditContainer
will not have been created yet. Meaning:would be changed to:
v-html Demo
DOM append Demo