我在使用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...
1条答案
按热度按时间but5z9lq1#
我不知道你的
i18n
,但我用i18next
。然后在任何地方你有任何被翻译的东西,你必须在javascript中呈现你的页面,类似于
然后,要更改语言,您需要运行
然后你需要重新加载所有使用翻译的html。
i18n
会自动为你选择当前语言。我不知道这对于你的具体情况是如何工作的,也许你可以初始化
i18next
对象,告诉它翻译在哪里。对我来说,我把所有的翻译都作为对象,并通过i18n.t
点标记法(没有0)访问它们,但我认为我上面展示的是你如何访问数组,你可以尝试一下。你可以尝试如下初始化i18n对象:其中en、jp和cn是具有转换的对象。
如果你愿意的话,你可以做的另一件事就是刷新页面并传递一个查询参数,例如
website.com?lang=cn
,让你的网站加载正确的i18n
翻译。