Search code examples
vue.jsvuejs2internationalizationvue-i18n

translate pipe inside v-html directive i18 vue with vuex


I'm using vuex-i18n package. Basically I'm translating most of my content by filter pipe like so:

{{ header | translate }}

but sometimes I need to translate text which in fact is just html and I bind it like so:

<p v-html="paragraph"></p>

but this doesn't work with pipe:

<p v-html="paragraph | translate"></p> // display ()

paragraph in above example is:

<p class="balears__text">Jest największym miastem Majorki, kosmopolityczną stolicą Balearów i prężniedziałającym, śródziemnomorskim ośrodkiem turystycznym.</p><p class="balears__text"> Katedra La Seu to zdecydowanie najsłynniejsza budowla Palmy. Ta gotycka świątynia z elementami architektury zaprojektowanej przez słynnego Gaudiego stanowi wizytówkę miasta i jest symbolem całej wyspy. </p><p class="balears__text"> Nieopodal katedry znajduje się pałac królewski La Almudaina. Spacer po komnatach i dziedzińcu sprawi, że poczujesz się, jakbyś wędrował po tych zabudowaniach w czasach ich świetności. </p><p class="balears__text"> Doskonałym pomysłem na rodzinne popołudnie jest wizyta w jednym z największych kompleksów akwariowych na świecie. W Palma Aquarium możesz przeżyć niesamowitą przygodę, nurkując z rekinami w najgłębszym zbiorniku w Europie, tzw. Big Blue. </p>


Solution

  • I found solution like so:

    <p v-html="$options.filters.translate(paragraph)"></p>