Question

有了Vue 2，我的模板中就有这个了

<table ref="test">
    ....
</table>

当我通过this.$refs.test获得此信息时，我得到了[object HTMLTableElement]，有没有办法返回实际的HTML？

Answer 1

很难说出这样做的目的是什么，但是例如，如果要显示outerHTML，则必须检查this.$refs.test是否存在以及是否存在-渲染它。这是因为refs没有反应性，因此使用computed属性将不起作用。

<pre v-if="!!$refs.test">{{$refs.test.outerHTML}}</pre>

如果要将outerHTML设置为属性，或对其使用querySelector或任何其他DOM操作，则需要等待组件为mounted。

mounted() {
    this.testRowContent = this.$refs.test.querySelector('.test').innerHTML;
}