Question

我为网站实施了多语言支持。使用VueJS和VueI18n。有3页 - 家庭，寄存器和消息。问题出在消息中，其中有一个动态呈现的表 - vue-good-table。如果我点击用于更改语言的按钮，则在此页面（包含表格）上，动态更改语言，而不是表格的标签和占位符。如果我转到其他页面并返回到表格，则标签和占位符会正确更新。当我在同一页面上时，你能帮助我改变它吗？

我想知道beforeMount（）在这种情况下会有所帮助吗？

main.js

import VueI18n from 'vue-i18n'
import {messages} from './locales/bg_en_messages'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'bg', // set locale
  fallbackLocale: 'bg',
  messages // set locale messages
});

Vue.prototype.$locale = {
  change (lang) {
    i18n.locale = lang
  },
  current () {
    return i18n.locale
  }
};

Messages.vue：

<vue-good-table
  :columns="columns"
  :rows="items"
  :paginate="true"
  :lineNumbers="true">
</vue-good-table>

<script type="text/javascript">
  export default {
    data(){
      return {
        items:[],
        columns: [
          {
            label: this.$t("columns.date"),
            field: 'changeddate',
            type: 'String',
            filterable: true,
            placeholder: this.$t("columns.date")
          },
          {
            label: this.$t("columns.userChange"),
            field: 'userchange',
            type: 'String',
            filterable: true,
            placeholder: this.$t("columns.userChange")
          }
        ]
      }
    }
  }

App.vue

<div style="padding: 10px; width: 99%;">
  <ui-button @click="changeLang('bg')">
    <img src="../src/assets/images/skin/Flag1.png" v-bind:alt="home" height="15" width="25"/>
</ui-button>
  <ui-button @click="changeLang('en')">
    <img src="../src/assets/images/skin/Flag2.png" v-bind:alt="home" height="15" width="25"/>
  </ui-button>
</div>

<script>
    export default {
      name: 'Localization',
      methods: {
        changeLang: function(newLang){
          this.$locale.change(newLang)
        }
      }
    }
</script>

Answer 1

原因是，正在更改的数据嵌套在对象本身内，而您的模板仅侦听对该父对象的更改，而不是对其子对象（您的语言数据）的更改。所以，即使改变了，你的观点也不会注意到它。如果您使用模板语法直接在模板中使用翻译中的数据，则数据将自动重新呈现，因为它不是嵌套的（这就是为什么它可能在其他任何地方都有效）。

现在当然你不能在你的表格中这样做，因为你的表组件只接受嵌套数据，所以解决方法是使用列的计算属性，而不是将它们放入组件的数据中。这样，所有更改都将镜像到您的组件。

只需改变你的组件就可以了：

export default {
    data(){
      return {
        items:[]
      }
    },
    computed: {
      columns () {
        return [
          {
            label: this.$t("columns.date"),
            field: 'changeddate',
            type: 'String',
            filterable: true,
            placeholder: this.$t("columns.date")
          },
          {
            label: this.$t("columns.userChange"),
            field: 'userchange',
            type: 'String',
            filterable: true,
            placeholder: this.$t("columns.userChange")
          }
        ]
      }
    }
  }

动态更改VueJS中列标签的语言

1 个答案: