Я уже пытаюсь перевести заголовок таблицы в компонент vue.js на несколько ночей, но у меня это не работает.Вероятно, это связано с тем, что я новичок в Vue.js и, возможно, я что-то забыл, но не могу найти подсказку.Перевод в тексте HTML работает нормально, но как только я хочу перевести атрибут внутри тега скрипта (например, атрибуты данных), я получаю консольные ошибки, что определенные поля не могут быть найдены.
ЧтоСначала я инициализировал компонент i18n в main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import axios from './api'
import VueAxios from 'vue-axios'
import VueI18n from 'vue-i18n'
Vue.use(BootstrapVue)
Vue.use(VueAxios, axios)
Vue.prototype.$axios = axios;
Vue.use(VueI18n)
// Ready translated locale messages
const messages = {
en: require('./locales/en_GB.json'),
nl: require('./locales/nl_NL.json')
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'nl', // set locale
fallbackLocale: 'en',
messages // set locale messages
})
// TODO load messages async, otherwise all messages will be loaded at once: http://kazupon.github.io/vue-i18n/guide/lazy-loading.html
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
template: '<App/>',
components: {
App
}
})
Затем в своем теге script компонента Users я пытаюсь перевести заголовок таблицы, который там определен.Однако по какой-то причине я получаю консольные ошибки, такие как TypeError: "o is undefined".
data: () => {
return {
items_data: [],
fields: [
{key: this.$i18n.t('next')}, //<-- Translate table header values
{key: 'name'},
{key: 'registered'},
{key: 'role'},
{key: 'status'}
],
currentPage: 1,
perPage: 5,
totalRows: 0
}
См. Полный файл здесь ниже:
<template>
<b-row>
<b-col cols="12" xl="6">
<transition name="slide">
<b-card :header="caption">
<b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked">
<template slot="id" slot-scope="data">
<strong>{{data.item.id}}</strong>
</template>
<template slot="name" slot-scope="data">
<strong>{{data.item.name}}</strong>
</template>
<template slot="status" slot-scope="data">
<b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
</template>
</b-table>
<nav>
<b-pagination size="sm" :total-rows="5" :per-page="perPage" v-model="currentPage" :prev-text="$t('previous')" :next-text="$t('next')" hide-goto-end-buttons/>
</nav>
</b-card>
</transition>
</b-col>
</b-row>
</template>
<script>
var usersData = null;
export default {
name: 'Test Users',
props: {
caption: {
type: String,
default: 'Users 2'
},
hover: {
type: Boolean,
default: true
},
striped: {
type: Boolean,
default: true
},
bordered: {
type: Boolean,
default: false
},
small: {
type: Boolean,
default: false
},
fixed: {
type: Boolean,
default: false
}
},
data: () => {
return {
items_data: [],
fields: [
{key: this.$i18n.t('next')}, //<-- Translate table header values
{key: 'name'},
{key: 'registered'},
{key: 'role'},
{key: 'status'}
],
currentPage: 1,
perPage: 5,
totalRows: 0
}
},
mounted() {
this.axios.getAll()
.then(response => {
//this.$log.debug("Data loaded: ", response.data)
this.items_data = response.data
}).catch(error => {
//this.$log.debug(error)
this.error = "Failed to load todos"
})
},
computed: {
items: function () {
return this.items_data;
}
},
methods: {
getBadge (status) {
return status === 'Active' ? 'success'
: status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
},
getRowCount (items) {
return items.length
},
userLink (id) {
return `users/${id.toString()}`
},
rowClicked (item) {
const userLink = this.userLink(item.id)
this.$router.push({path: userLink})
}
}
}
</script>
<style scoped>
.card-body >>> table > tbody > tr > td {
cursor: pointer;
}
</style>
Я был бы очень благодарен, когда кто-то мог бы помочь мнескажите, как я должен переводить тексты такого типаЯ пытался найти свое решение через Google, но, по словам Google, это более или менее так и должно работать.