Question

我已经尝试在vue.js组件中转换表头了好几个晚上，但是对我来说不起作用。可能是因为我是Vue.js的新手，可能是我忘记了一些东西，但找不到线索。 HTML措辞中的翻译工作正常，但是一旦我想翻译script标签中的属性（例如数据属性），我就会收到控制台错误，提示找不到某些字段。

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

mvn clean verify

然后在用户组件的脚本标签中，我尝试转换在其中定义的表头。但是由于某种原因，我收到诸如mvn clean install之类的控制台错误。

mvn clean install

在下面查看完整文件：

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

当有人可以帮助我告诉我如何翻译这类文本时，我将非常感激。我试图通过Google找到我的解决方案，但是据Google称，这或多或少是应该如何工作的。

Answer 1

根据documentation：

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

表示您的fields属性中的键值需要与items键相匹配。
例如，first_name：

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

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

<div class="box">
        <div class="wrapper">
            <div class="image">
                <a href="#"><img src="#"></a>
            </div>


            <div class="header">
                <h3 class="title">Title</h3>
            </div>


            <div class="content">           
                <p>text<p>
            </div>
        </div>
</div>

var usersData = null;
import i18n from 'your-path/i18n';
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: i18n.t('next')}, //<-- Add Like this, you need to recreate your component
        {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})
    }

  }
}

Answer 3

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

    ]
  }
}

在Bootstrap-Vue.js中翻译表头

3 个答案: