Vue function h() props의 innerHTML이 적용되지 않는 경우

https://vuejs.org/guide/extras/render-function.html

공식 홈페이지에선 h function의 innerHTML 사용 방법을 아래와 같이 설명하고 있다.

 

export default {
  render(h) {
    return h('div', { innerHTML: 'hello' })
  }
}

하지만 필자의 경우 위와 같이 사용해도 innerHTML이 적용되지 않았다.

이유는 정확하게 모르겠지만 어느 순간부터 문법이 바뀐 듯하다.

 

innerHTML을 적용하려면 아래와 같이 적용해야 한다.

export default {
  render(h) {
    return h('div', { domProps: { innerHTML: 'hello' } })
  }
}

innerHTML 뿐만 아니라 id, a 태그의 href target 같은 웬만한 attribute는 domProps에 넣어야 적용된다.

필자가 확인해본 결과 class, style의 경우엔 props Object에 넣어야 한다. (domProps에 넣지 말 것!!)

domProps를 구분하는 방법을 아는 경우 댓글로 알려주면 고맙겠다....

 

vue-router 혹은 nuxt-link의 to attribute의 경우엔 해당 domProps에 넣어도 적용되지 않는다.

해당 내용은 다음 포스트에서 설명하도록 하겠다.