For a few nights now, I've been struggling to translate the table header in my vue.js component. It seems like I'm missing something as I'm new to Vue.js and can't seem to figure out what's wrong. Translating within the HTML works perfectly fine, but when I attempt to translate attributes within the script tag (such as data attributes), I encounter console errors stating that certain fields cannot be found.
Here's what I've done: I initialized the i18n component in the main.js file.
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
}
})
Then, within the script tag of the Users component, I'm trying to translate the table header. However, I keep getting console errors like 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
}
You can view the full file below:
<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>
I would greatly appreciate any help or guidance on how to properly translate these types of texts. Google hasn't provided a definitive answer, so any assistance would be invaluable.