在 VueJS 中渲染 [object HTMLTableElement]
Render [object HTMLTableElement] in VueJS
对于那些尝试过 jsdifflib know that this plugin returns an HTMLTableElement 的人。现在我想在我的 VueJS 组件上尝试 render/display 这个。
我试过以下方法:
模板
<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 和这个 returns 作为 HTML 对象,如下面的屏幕截图所示:
不知何故,使用 v-html 是不可能的,因为它只渲染一个对象 {},如 console.log(typeof this.dynamicHtmlContent);
所述,那么我如何将其渲染到我的 Vue 组件?我还发现很难将其转换为纯字符串。请帮我解决这个问题。
您仍然可以使用 v-html,您只需更改您正在访问的内容。因为你得到的最终将成为一个实际的 DOM 元素,你可以做一些事情。
第一种是简单地更改 v-html 以访问元素的 outerHTML
property
v-html="dynamicHtmlContent.outerHTML"
或者直接保存outerHTML
到dynamicHtmlContent
而不是DOM元素
this.dynamicHtmlContent = auditService.getDiff().outerHTML
您可以做的另一件事是直接通过 accessing your auditContainer
reference through this.$refs
附加 DOM 元素
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演示
var table = document.createElement('table');
var body = table.createTBody();
var row = body.insertRow();
var cell = row.insertCell();
cell.innerHTML = "A test table";
var vm = new Vue({
el: '#app',
data() {
return {
dynamicHtmlContent: null
}
},
created() {
this.displayDiff();
},
methods: {
displayDiff: function() {
this.dynamicHtmlContent = table;
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<div class="diff-container" v-html="dynamicHtmlContent.outerHTML" ref="auditContainer"></div>
</div>
DOM 附加演示
var table = document.createElement('table');
var body = table.createTBody();
var row = body.insertRow();
var cell = row.insertCell();
cell.innerHTML = "A test table";
var vm = new Vue({
el: '#app',
data() {
return {
dynamicHtmlContent: null
}
},
mounted() {
this.displayDiff();
},
methods: {
displayDiff: function() {
this.$refs.auditContainer.appendChild(table);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<div class="diff-container" ref="auditContainer"></div>
</div>
对于那些尝试过 jsdifflib know that this plugin returns an HTMLTableElement 的人。现在我想在我的 VueJS 组件上尝试 render/display 这个。
我试过以下方法:
模板
<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 和这个 returns 作为 HTML 对象,如下面的屏幕截图所示:
不知何故,使用 v-html 是不可能的,因为它只渲染一个对象 {},如 console.log(typeof this.dynamicHtmlContent);
所述,那么我如何将其渲染到我的 Vue 组件?我还发现很难将其转换为纯字符串。请帮我解决这个问题。
您仍然可以使用 v-html,您只需更改您正在访问的内容。因为你得到的最终将成为一个实际的 DOM 元素,你可以做一些事情。
第一种是简单地更改 v-html 以访问元素的 outerHTML
property
v-html="dynamicHtmlContent.outerHTML"
或者直接保存outerHTML
到dynamicHtmlContent
而不是DOM元素
this.dynamicHtmlContent = auditService.getDiff().outerHTML
您可以做的另一件事是直接通过 accessing your auditContainer
reference through this.$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演示
var table = document.createElement('table');
var body = table.createTBody();
var row = body.insertRow();
var cell = row.insertCell();
cell.innerHTML = "A test table";
var vm = new Vue({
el: '#app',
data() {
return {
dynamicHtmlContent: null
}
},
created() {
this.displayDiff();
},
methods: {
displayDiff: function() {
this.dynamicHtmlContent = table;
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<div class="diff-container" v-html="dynamicHtmlContent.outerHTML" ref="auditContainer"></div>
</div>
DOM 附加演示
var table = document.createElement('table');
var body = table.createTBody();
var row = body.insertRow();
var cell = row.insertCell();
cell.innerHTML = "A test table";
var vm = new Vue({
el: '#app',
data() {
return {
dynamicHtmlContent: null
}
},
mounted() {
this.displayDiff();
},
methods: {
displayDiff: function() {
this.$refs.auditContainer.appendChild(table);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<div class="diff-container" ref="auditContainer"></div>
</div>