からカスタムタグをレンダリングします。たとえば、は、私は次のコンポーネントMyComponent.vueを持っているREST APIレスポンス
<custom-component data-count="1"></custom-component><p>some text</p>
custom-componentタグがレンダリングされないことがあります。
vueコンポーネントをREST APIから取得したhtml-stringからレンダリングすることは可能ですか？v-htmlでこの文字列を使用すると、
私は、次の例を使用するためには、コンパイラとVueのバージョンが必要：
<div id="app">
<h3>
Vue component creator
</h3>
Template
<textarea v-model="template"></textarea>
Options
<textarea v-model="options"></textarea>
<button @click="create">
Create component
</button>
<component :is="resultComponent"></component>
</div>
Vue.component('test',{
template:'<div>It works!</div>'
})
new Vue({
el:'#app',
data(){
return{
stuff:'stuff',
template:
`<div>
<test></test>
<b>{{stuff}}</b>
<div v-for="n in 10">{{n}}</div>
</div>`,
options:
`{
data(){
return {stuff:'awesome'}
}
}`,
resultComponent:undefined
}
},
methods:{
create(){
let component = new Function('return' + this.options)()
component.template = this.template
this.resultComponent = component
}
}
})
を参照してくださいhttps://vuejs.org/v2/guide/components.html#Async -Commponents – Phil
@Phil {'custom-component' :(）=> import（ 'CustomComponent.vue'）}を追加しても問題は解決されません。私はそれがv-htmlでコンテンツを使用することに関連していると思う。 –
これは、変更や遵守に関する大きな問題を引き起こす可能性があるカスタムコンポーネントのコンパイルとマウントの手順をバイパスしようとしているという問題です。 REST APIが純粋なデータを返し、コンポーネントが適切にレンダリングするようにシステムを再設計する方がよいでしょう。 –