3

vue プロジェクトでvue-i18nを使用しています。そして、i18nを使用して vue でデータを使用すると、非常に混乱することがわかりました。data次に変更するlocaleと、そのデータは反応しなくなります。data私は別のものからそれを返そうとしましたcomputed dataが、とにかくi18nはで書かれているので反応dataしません。*私の状況 - *その上にドロップダウン(チェックボックス付きの列のリスト) があるテーブルを表示したい。ユーザーが列をチェックすると、チェックを外すとテーブルに表示されます。変更するまでは正常に動作しています。変更後はありませんlocalelocale table columns翻訳されましたdropdown itemsが、反応的に翻訳され、コードが機能しなくなりました。よりよく説明するためのコードを次に示します。私のmyTable.vueコンポーネントでは、bootstrap-vue テーブルtemplateを使用します- myTable.vueで

<vs-dropdown vs-custom-content vs-trigger-click>
  <b-link href.prevent class="card-header-action btn-setting" style="font-size: 1.4em">
    <i class="fa fa-th"></i>
  </b-link>
  <vs-dropdown-menu class="columns-dropdown">
    <visible-columns :default-fields="columns" @result="columnListener"></visible-columns>
  </vs-dropdown-menu>
</vs-dropdown>

<b-table class="generalTableClass table-responsive" :fields="computedFieldsForTable">custom content goes here</b-table>

scriptmyTable.vue

data(){
  return {
   fieldsForTable: [];
  }
},

computed: {
  computedFieldsForTable () {
    return this.fieldsForTable;
  },

  columns() {
    return [
     {
       key: 'id',
       label: this.$t('id'),,
       visible: true,
       changeable: true
     },
     {
       key: 'fullName',
       label: this.$t('full-name'),,
       visible: true,
       changeable: true
     },
     {
       key: 'email',
       label: this.$t('email'),,
       visible: true,
       changeable: true
     }
    ]
  }
},

mounted () {
  this.fieldsForTable = this.filterColumns(this.columns);
},

methods: {
  filterColumns(columns = []) {
    return columns.filter(column => {
      if (column.visible) {
        return column
      }
    })
  },
  columnListener ($event) {
    this.fieldsForTable = this.filterColumns($event)
  }
} 

誰かがこの状況についてアドバイスをくれますか?

*いくつかのデバッグ後に編集:メソッド内でcolumns(でcomputed)フィルタリングして返すと、実際にはnotで(オブジェクトの)配列が返されると思います。そのため、フィルタリングした後、新しい配列はvue-i18nとは何の関係もありません。私の最後のチャンスは、ロケールが変更されたときにページをリロードすることです。fieldsForTablefilterColumns(columns)label='Label Name'label=this.$t('labelName')

4

1 に答える 1