У меня проблема при попытке загрузить имена изображений для карусели Vuetify из vue-i18n. Карусель работала нормально до реализации vue-i18n, но ее пришлось использовать для локализации-трансляции. Карусель имеет v-for для объекта "items", который имеет "src", "title", "text" и "to", заголовок, текст и to для создания карточек для каждого изображения карусели, поэтому необходим перевод чтобы изменить их.
Но, по сути, извлечение этого объекта "items" из данных страницы, которые теперь находятся в en-US.json vue-i18n, заставляет источник не соединяться с импортированными изображениями страницы и т. д. это не показывает изображения. Тексты, заголовки и т. Д. Работают, как и раньше, и в консоли не отображается никаких ошибок.
Изображения находятся в папке ресурсов и импортируются на страницу в начале скрипта как
import img1 from '@/assets/img/img1.jpg'
Один из способов ее решения - хранить изображения в облаке и иметь только ссылки, но это приведет к повторной загрузке изображений при каждом новом переходе от пользователя, который не нужен.
Другим решением, которое я мог бы решить, было бы, если бы я мог как-то иметь два разных v-for, одно для изображений (чтобы держать их внутри данных страницы, так как он работает таким образом) и одно для заголовка, текста и их в en-US.json для перевода vue-i18n, но я не знаю, можно ли это сделать в одной и той же карусели.
Промежуточное программное обеспечение vue-i18n, плагин, vuex и т. Д. Реализуется, как указано в документации по nuxt.js для vue-i18n 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 (вместо этого используется v-for для объекта "items"):
data () {
return {
items: [
{
src: img1,
title: 'Warehouse',
text: '...',
to: '/warehouse'
},
{
src: img2,
title: 'Office',
text: '...',
to: '/about'
},
Как это происходит с изменением vue-i18n (имея объект в файле en-US.json, используя v-for для объекта $ t ('default.index.items'))
{
"default": {
"index": {
"items": [
{
"src": "img1",
"title": "Warehouse",
"text": "...",
"to": "/warehouse"
},
{
"src": "img2",
"title": "Office",
"text": "...",
"to": "/about"
},
]
}
}
}
Если вам нужна дополнительная информация, пожалуйста, скажите мне предоставить ее. Любая помощь или идеи приветствуются.