Доступ к HTML элемента DOM?

Question

С Vue 2 у меня есть это в моем шаблоне:

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

Когда я получаю это через this.$refs.test Я получаю [object HTMLTableElement] Есть ли способ вернуть фактический HTML?

Answer 1

Трудно сказать, какова ваша цель в этом, но если вы хотите иметь возможность, например, отображать его outerHTML, вам нужно проверить, существует ли this.$refs.test, и если он есть - отобразить его. Это потому, что refs не реагирует, поэтому использование computed свойств не будет работать.

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

Если вы хотите установить outerHTML для свойства или использовать querySelector или любую другую операцию DOM с ним, вам нужно подождать, пока ваш компонент будет mounted.

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

Пример: http://jsfiddle.net/eywraw8t/323125/