[컴][웹] vue.js 에서 rendered HTML 을 가져오는 방법

 

vue.js 에서 rendered HTML 을 가져오는 방법

아래 글에서 대략적인 내용을 알려준다.

• javascript - How to get html content of component in vue js - Stack Overflow

아래처럼 2가지 방법으로 가능하다. 하나는 rendered 된 page 의 refs 를 사용하는 방법이고, 다른 하나는 직접 html 을 string 으로 작성하는 방법이다.

$ref 를 이용

<print-template
        ref="printTemplate"
        :data="data"
      />
...
this.$refs.foo[0].$el.innerHTML

string 변수

export const mytemplate = `
  <div class="box">
    <my-card class="card">
     ...
    </my-card>
  </div>
`

dynamic binding 된 rendered HTML

1번째 rendering 된 html 을 가져오는 방식은 reneder 가 확실히 끝나고 나서 가져와야 한다. 그렇지 않으면 아무런 값이 없을 수 있다. 그래서 항상 update 가 끝난 이후에 rendered 된 값을 가져와야 한다. 

그러기 위해서 다음과 같이 this.$nextTick 을 사용하면 된다. 다음 링크들을 참고하자.

1. updated LifeCycle  — Vue.js
2. The Vue Instance Lifecycle-Diagram — Vue.js

export default {
  name: 'MyComp',
  components: {
  },
  data: function() {
    return {
      isDataReceived: false, // this is to check data is received
    }
  },
  computed: {
  },
  updated() {
    this.$nextTick(() => {
      if (!this.isDataReceived) {
        return
      }
      _printData.call(this, this.$refs.printTemplate.innerHTML)
      this.isDataReceived = false
    })
  },