我在尝试从 vue-i18n 加载 Vuetify 轮播的图像名称时遇到问题。轮播在实施 vue-i18n 之前工作正常,但必须将其用于本地化翻译。轮播在“items”对象上有一个 v-for,其中包含“src”、“title”、“text”和“to”,title、text 和 to 用于为每个轮播图片生成的卡片,因此需要翻译改变它们。
但基本上从页面数据中拉出这个“项目”对象现在位于 vue-i18n 的 en-US.json 中,会使源无法与页面的导入图像连接,因此它不会显示图像. 文本、标题等和以前一样工作,控制台中不会显示错误。
import img1 from '@/assets/img/img1.jpg'
解决此问题的一种方法是将图像存储在云中并仅具有链接,但这会触发重新下载图像,并使用来自用户的每个不想要的新导航。
我想到的另一个解决方案是,如果我能以某种方式有两个不同的 v-for ,一个用于图像(将它们保存在页面数据中,因为它是这样工作的),另一个用于标题、文本和 to,将它们放在en-US.json 用于 vue-i18n 翻译,但我不知道这是否可以在同一个轮播中完成。
vue-i18n 中间件、插件、vuex 等正在按照 vue-i18n 的 nuxt.js 文档中的方式实现https://nuxtjs.org/examples/i18n/
我正在展示更多代码
index.vue(主页default.vue 布局内的页面)
<template>
<div>
<v-layout id="maincontent">
<v-carousel style="height:95%" hide-delimiters interval="4000">
<v-carousel-item transition="fade" reverse-transition="fade" v-for="
(item, i) in $t('default.index.items')" :src="item.src" :key="i">
<v-flex sm10 xs8>
<v-card nuxt :to="item.to" class="elevation-10" color="grey
darken-3
white--text" style="opacity:0.8">
<v-card-title>
<h3 class="headline">{{item.title}}</h3>
</v-card-title>
<v-card-text>
<p class="subheading">{{item.text}}</p>
</v-card-text>
</v-card>
</v-flex>
</v-carousel-item>
</v-carousel>
</v-layout>
</div>
</template>
带有导入图像的 index.vue 页面的脚本:
<script>
import img1 from '@/assets/img/img1.jpg'
import img2 from '@/assets/img/img2.jpg'
import img3 from '@/assets/img/img3.jpg'
import img4 from '@/assets/img/img4.jpg'
import img5 from '@/assets/img/img5.jpg'
import img6 from '@/assets/img/img6.jpg'
import img7 from '@/assets/img/img7.jpg'
export default {
data () {
return {
在没有 vue-i18n 更改的情况下它是如何工作的(在“items”对象上使用 v-for 代替):
data () {
return {
items: [
{
src: img1,
title: 'Warehouse',
text: '...',
to: '/warehouse'
},
{
src: img2,
title: 'Office',
text: '...',
to: '/about'
},
vue-i18n 更改的情况如何(在 $t('default.index.items') 对象上使用 v-for 在 en-US.json 文件中使用对象)
{
"default": {
"index": {
"items": [
{
"src": "img1",
"title": "Warehouse",
"text": "...",
"to": "/warehouse"
},
{
"src": "img2",
"title": "Office",
"text": "...",
"to": "/about"
},
]
}
}
}
如果需要更多信息,请告诉我提供。欢迎任何帮助或想法。