vue.js 使用I18 n以不同的语言显示详细信息,如名称和描述,使用v-for在json文件中循环

ogq8wdun  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(126)

我在使用v-for循环的Json文件中遇到问题,无法以不同的语言显示详细信息。它只能以我选择的语言显示。如果我在网页上切换语言选项,它不会以其他语言显示翻译后的内容。

<div class="artist_grid_list_container">
          <ul class="artist_grid_list" v-show="profile_flag">
                <li class="artist_grid_list_item" v-for="item in data.en" :key="item.id">
                    <span class="artist_grid_list_item_box"
                      ><img
                        v-on:click="modal_on('naritaaiko')"
                        :src="item.img"
                        data-micromodal-trigger="modal-1"
                        class="modal_open"
                    /></span>
                    <p class="member_name">{{item.artist_name}}</p>
                </li>


标签中的“member_name”类只是显示json的en细节,如果我键入ja或cn而不是en,它会切换。我的观点是我不希望它以这种方式显示。我希望使用I18 n能够通过在网页上选择它来自动切换语言。
下面是json文件代码:

{
"en":
    [{
      "img":"/img/event/cheersupports/2022/appreciation/profile/naritaaiko_hyakka.jpg",
      "artist_name": "Narita Aiko and Hyakka-Ryouran",
      "artist_profile":  "She is active in a band mainly in Yokohama.<br>She is a singer who sends various messages through her songs, and also throws out inspirational messages.<br>Especially, she sings nostalgic melodies, Hawaiian music, movie music, and songs, especially Hibari Misora.<br>While volunteering at nursing homes and other facilities, she aims to create a band that can push people to dream and hope."
  },
  {
      "img":"/img/event/cheersupports/2022/appreciation/profile/ko_ryudai.jpg",
      "artist_name": "Ko Ryudai",
      "artist_profile":  "Japanese drum and shinobue player<br>Born in Beppu City, Oita Prefecture.<br>After graduating from high school, he joined a professional Japanese instrument group.<br>He has toured in France, Germany, Russia, and the United States as a performer.<br>In Japan, he performed in the Kohaku Uta Gassen (Red and White Singing Contest).<br>He has traveled around the world with various Japanese instruments such as taiko, koto, and shinobue.<br>After leaving a professional taiko group in 2019, he will be a solo artist to promote the appeal of Japanese instruments."
  },
  {

我有相同的文本为JN和CN语言。只是显示json文件是如何结构。
这是我在脚本中允许本地化的内容。

var i18njs = require("~/locale/i18n.js");
var i18n = i18njs.selectLocale("event/cheerssupports/2022/appreciation/profile");

谁能帮我解决这个问题?
我尝试了不同的选项,但都不起作用,例如更改以下代码:
我修改了json文件并删除了en/jn/cn代码,而是将它们作为每个键值对的扩展名输入。

"artist_name_en": ,
      "artist_profile_en": 
  },

然后更改代码:

<div v-for="item in data" :key="item.id">
     <p {{item.artist_name_[$i18n.locale]}} </p>
</div>

但效果不太好。
我不想硬编码所有的HTML。我想使代码更简单使用javasscript和i18 n...

but5z9lq

but5z9lq1#

我不知道你的i18n,但我用i18next
然后在任何地方你有任何被翻译的东西,你必须在javascript中呈现你的页面,类似于

html = `<div>${i18n.t('data.0.artist_name')}</div>
<dib>${i18n.t('data.0.artist_profile')}</div>`;

然后,要更改语言,您需要运行

i18n.changeLanguage('en');  # or jp/cn/etc

然后你需要重新加载所有使用翻译的html。i18n会自动为你选择当前语言。
我不知道这对于你的具体情况是如何工作的,也许你可以初始化i18next对象,告诉它翻译在哪里。对我来说,我把所有的翻译都作为对象,并通过i18n.t点标记法(没有0)访问它们,但我认为我上面展示的是你如何访问数组,你可以尝试一下。你可以尝试如下初始化i18n对象:

i18n = i18next
.init({
    fallbackLng: 'en',
    lng: 'en',
    resources: {
        en: {
            translation: en,
        },
        jp: {
            translation: jp,
        },
        cn: {
            translation: cn,
        },
    },
});

其中en、jp和cn是具有转换的对象。
如果你愿意的话,你可以做的另一件事就是刷新页面并传递一个查询参数,例如website.com?lang=cn,让你的网站加载正确的i18n翻译。

相关问题