Вы не можете использовать v-html
с компонентом Vue.Из документа v-html :
Обратите внимание, что содержимое вставлено в виде обычного HTML - оно не будет скомпилировано как шаблоны Vue.Если вы пытаетесь составить шаблоны с использованием v-html, попробуйте переосмыслить решение, используя вместо этого компоненты.
Однако вы все равно можете добиться этого, используя динамический компонент и compile function.
Render.vue
<template>
<component :is="result"/>
</template>
<script>
import Vue from 'vue'
export default {
props: {
html: String
},
computed: {
result () {
return Vue.compile(this.html)
}
}
}
</script>
Затем используйте его вместо v-html:
<Render :html="$t('page')"/>
Зарегистрируйте ваши компоненты как глобальные компоненты (Если вы хотите зарегистрироваться локально, вы можетепередать ваши компоненты в Render и зарегистрировать его с результатом функции компиляции):
Vue.component('Post', Post)
Примечание: Vue.compile
доступно только в полной сборке, вы должны добавить runtimeCompiler: true
в vue.config.js
.