Как объединить страницы vue, i18n и уценки? - PullRequest
Новая
       19

Как объединить страницы vue, i18n и уценки?

0 голосов
/ 01 июня 2019

Я пытаюсь использовать страницы уценки как переводы в vue.

Это моя попытка заставить его работать:

Home.vue 

<template>
  <div v-html="$t('page')">
  </div>
</template>

<script>
import Page from '@/components/BonjourLeMonde.md'

export default {
  name: 'home',
  components: {
    Page
  }
}
</script>

<i18n>
{
  "en": {
    "page": "<h1>Welcome to my homepage!</h1><br>Doesn't this look awesome?"
  },
  "fr": {
    "page": "Non? <Page />"
  }
}
</i18n>

BonjourLeMonde.md 

# Bonjour tout le monde!

Bienvenue pour mon site de web.

К сожалению, хотя html-теги можно читать, импорт не загружается.

Кто-нибудь знает решение дляэто?

Ссылка на пример кода .

Ответы [ 2 ]

1 голос
/ 02 июня 2019

Вы не можете использовать 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.

0 голосов
/ 03 июня 2019

Решено с помощью VueSimpleInlineTranslation.

Home.md 

<template>
  <div>
    <translate :current-language="$i18n.locale" language="en"><PageEN /></translate>
    <translate :current-language="$i18n.locale" language="fr"><PageFR /></translate>
  </div>
</template>

<script>
import { VueSimpleInlineTranslation } from '@alidrus/vue-simple-inline-translation'
import PageEN from '@/components/HelloWorld.md'
import PageFR from '@/components/BonjourLeMonde.md'

export default {
  name: 'home',
  components: {
    translate: VueSimpleInlineTranslation,
    PageEN,
    PageFR
  }
}
</script>
...