Javascript 翻译Bootstrap-Vue.js中的表头

我已经试着在vue.js组件中翻译我的表格标题好几个晚上了，但它对我不起作用。这可能是因为我是Vue.js新手，可能是因为我忘记了一些东西，但我找不到线索。HTML措辞中的翻译工作正常，但只要我想翻译脚本标记中的属性（例如，数据属性），就会出现控制台错误，无法找到某些字段

首先，我在main.js中初始化了i18n组件

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
  }
})

请参阅下面的完整文件：

<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>

{{data.item.id}
{{data.item.name}
{{data.item.status}
var usersData=null；
导出默认值{
名称：'测试用户'，
道具：{
标题：{
类型：字符串，
默认值：“用户2”
},
悬停：{
类型：布尔型，
默认值：true
},
条纹：{
类型：布尔型，
默认值：true
},
边界：{
类型：布尔型，
默认值：false
},
小型：{
类型：布尔型，
默认值：false
},
固定的：{
类型：布尔型，
默认值：false
}
},
数据：（）=>{
返回{
数据项：[]，
字段：[
{key:this.$i18n.t（'next'）}，//{
//这是.log.debug（“数据加载：”，response.Data）
this.items\u data=response.data
}).catch（错误=>{
//这是.log.debug（错误）
this.error=“未能加载TODO”
}) 
},
计算：{
项：函数（）{
返回此.items\u数据；
}
},
方法：{
getBadge（状态）{
返回状态===“活动”？“成功”
：status===“非活动”？“辅助”
：status===“挂起”？“警告”
：状态===‘禁止’？‘危险’：‘主要’
},
getRowCount（项目）{
返回项目。长度
},
用户链接（id）{
返回`users/${id.toString（）}`
},
行（项目）{
const userLink=this.userLink（item.id）
这是.$router.push（{path:userLink}）
}
}
}
.card body>>>table>tbody>tr>td{
光标：指针；
}

如果有人能帮我告诉我应该如何翻译这些类型的文本，我会非常感激。我试图通过谷歌找到我的解决方案，但根据谷歌的说法，这或多或少是它应该如何工作的。

根据：

字段属性用于自定义表列标题，以及 数据列的显示顺序。字段对象 键用于从每个项中提取值行

这意味着在

字段

属性中，键的值需要与

项

键匹配。
例如，

名字

：

fields: [
  { key: 'first_name'}
],
items: [
  { first_name: 'John' },
  { first_name: 'Jane' }
]

---

如果要自定义标题（如翻译的标题），可以使用

label

：

fields: {
  {
    next: { label: this.$i18n.t('next') },
    name: { label: this.$i18n.t('name') },
    registered: { label: this.$i18n.t('registered') },
    role: { label: this.$i18n.t('role') },
    status: { label: this.$i18n.t('status') }
  }
}

var usersData=null；
从“您的路径/i18n”导入i18n；
导出默认值{
名称：'测试用户'，
道具：{
标题：{
类型：字符串，
默认值：“用户2”
},
悬停：{
类型：布尔型，
默认值：true
},
条纹：{
类型：布尔型，
默认值：true
},
边界：{
类型：布尔型，
默认值：false
},
小型：{
类型：布尔型，
默认值：false
},
固定的：{
类型：布尔型，
默认值：false
}
},
数据：（）=>{
返回{
数据项：[]，
字段：[
{key:i18n.t（'next'）}，//{
//这是.log.debug（“数据加载：”，response.Data）
this.items\u data=response.data
}).catch（错误=>{
//这是.log.debug（错误）
this.error=“未能加载TODO”
}) 
},
计算：{
项：函数（）{
返回此.items\u数据；
}
},
方法：{
getBadge（状态）{
返回状态===“活动”？“成功”
：status===“非活动”？“辅助”
：status===“挂起”？“警告”
：状态===‘禁止’？‘危险’：‘主要’
},
getRowCount（项目）{
返回项目。长度
},
用户链接（id）{
返回`users/${id.toString（）}`
},
行（项目）{
const userLink=this.userLink（item.id）
这是.$router.push（{path:userLink}）
}
}
}

{{data.item.id}
{{data.item.name}
{{data.item.status}

为此使用Computed属性，其效率更高：
在这里输入代码
...
方法：{
translateCol（colName）{
返回此。$i18n.t（'.fields.+colName+'.label'））
}
},
计算：{
字段（）{
返回[
{key:'id'，label:this.translateCol（'id'），sortable:true}，
{key:'name'，label:this.translateCol（'name'），sortable:true}，
{key:'description'，label:this.translateCol（'description'），sortable:true}，
]
}
}

fields: {
  {
    next: { label: this.$i18n.t('next') },
    name: { label: this.$i18n.t('name') },
    registered: { label: this.$i18n.t('registered') },
    role: { label: this.$i18n.t('role') },
    status: { label: this.$i18n.t('status') }
  }
}

Use the Computed Property For This,Its more Efficient:

    enter code here
<b-table :fields="fields" />

...

methods: {
  translateCol (colName) {
    return this.$i18n.t('.fields.' + colName + '.label')
  }
},
computed: {
  fields () {
    return [
      { key: 'id', label: this.translateCol('id'), sortable: true },
      { key: 'name', label: this.translateCol('name'), sortable: true },
      { key: 'description', label: this.translateCol('description'), sortable: true },

    ]
  }
}