title: Translate header of table in Bootstrap-Vue.js
body: <p>I'm already trying to translate my table header in a vue.js component for a few nights, but it doesn't work for me. Probably this is due the fact that I'm new to Vue.js and probably that I'm forgetting something but I'm not able to find the clue. The translation within the HTML wording is working fine, but as soon as I would like to translate an attribute within the script tag (e.g. data attributes) I'm getting console errors that certain fields cannot be found.</p>
  
  <p>What I did, first I initialized the i18n component within the main.js</p>
  
  <pre><code>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: '&lt;App/&gt;',
    components: {
      App
    }
  })
  </code></pre>
  
  <p>Then within my script tag of the Users component I'm trying to translate the table header that is defined in there. However for some reason I'm getting console errors like <code>TypeError: "o is undefined"</code>.</p>
  
  <pre><code>  data: () =&gt; {
      return {
        items_data: [],
        fields: [
          {key: this.$i18n.t('next')}, //&lt;-- Translate table header values
          {key: 'name'},
          {key: 'registered'},
          {key: 'role'},
          {key: 'status'}
        ],
        currentPage: 1,
        perPage: 5,
        totalRows: 0
      }
  </code></pre>
  
  <p>See full file here below:</p>
  
  <pre><code>&lt;template&gt;
    &lt;b-row&gt;
      &lt;b-col cols="12" xl="6"&gt;
        &lt;transition name="slide"&gt;
        &lt;b-card :header="caption"&gt;
          &lt;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"&gt;
            &lt;template slot="id" slot-scope="data"&gt;
              &lt;strong&gt;{{data.item.id}}&lt;/strong&gt;
            &lt;/template&gt;
            &lt;template slot="name" slot-scope="data"&gt;
              &lt;strong&gt;{{data.item.name}}&lt;/strong&gt;
            &lt;/template&gt;
            &lt;template slot="status" slot-scope="data"&gt;
              &lt;b-badge :variant="getBadge(data.item.status)"&gt;{{data.item.status}}&lt;/b-badge&gt;
            &lt;/template&gt;
          &lt;/b-table&gt;
          &lt;nav&gt;
            &lt;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/&gt;
          &lt;/nav&gt;
        &lt;/b-card&gt;
        &lt;/transition&gt;
      &lt;/b-col&gt;
    &lt;/b-row&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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: () =&gt; {
      return {
        items_data: [],
        fields: [
          {key: this.$i18n.t('next')}, //&lt;-- Translate table header values
          {key: 'name'},
          {key: 'registered'},
          {key: 'role'},
          {key: 'status'}
        ],
        currentPage: 1,
        perPage: 5,
        totalRows: 0
      }
    },
    mounted() {
      this.axios.getAll()
        .then(response =&gt; {
          //this.$log.debug("Data loaded: ", response.data) 
          this.items_data = response.data
        }).catch(error =&gt; {  
        //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})
      }
  
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .card-body &gt;&gt;&gt; table &gt; tbody &gt; tr &gt; td {
    cursor: pointer;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>I would be very thankful when someone could help me to tell how I should translate these type of texts. I tried to find my solution via Google, but according to Google this is more or less how it should work.</p>