추가 래핑 태그 없이 v-html을 렌더링하시겠습니까?

추가 래핑 태그 없이 v-html을 렌더링하시겠습니까?

vue 2에서v-html추가 포장 태그를 렌더링해야 합니다.하지만 나는 다음과 같은 것을 시도하고 있다.

<select v-model="coutnry">
 // here the options to be rendered.
</select>


<script>
...
data()}{
 return{
  countryTags:`<option value="BD">Bangladesh</option>`
 }
}
</script>

여기에서는 html 태그를 추가로 렌더링할 수 없기 때문에 피곤합니다.<template v-html="countryTags">효과가 없었어요stackoverlflow에 관한 다른 솔루션은 약간 혼란스러워 보입니다.적절한 해결책은 무엇인가?

유감스럽게도 Vue에서는 이 작업을 쉽게 수행할 수 있는 방법을 제공하지 않습니다(이유에 대한 자세한 내용은 https://github.com/vuejs/vue/issues/7431)를 참조해 주십시오.

여기서 설명한 바와 같이 기능 컴포넌트를 생성하여 래퍼 요소 없이 HTML을 렌더링할 수 있습니다.

Vue.component('html-fragment', {
  functional: true,
  props: ['html'],
  render(h, ctx) {
    const nodes = new Vue({
      beforeCreate() { this.$createElement = h }, // not necessary, but cleaner imho
      template: `<div>${ctx.props.html}</div>`
    }).$mount()._vnode.children
    return nodes
  }
})

이 컴포넌트는 Vue 코어 멤버(LinusBorg)에 의해 생성됩니다.https://jsfiddle.net/Linusborg/mfqjk5hm/

언급URL : https://stackoverflow.com/questions/67769477/render-v-html-without-extra-wrapping-tag