vue プロジェクトでvue-i18nを使用しています。そして、i18nを使用して vue でデータを使用すると、非常に混乱することがわかりました。data
次に変更するlocale
と、そのデータは反応しなくなります。data
私は別のものからそれを返そうとしましたcomputed data
が、とにかくi18nはで書かれているので反応data
しません。*私の状況 - *その上にドロップダウン(チェックボックス付きの列のリスト) があるテーブルを表示したい。ユーザーが列をチェックすると、チェックを外すとテーブルに表示されます。変更するまでは正常に動作しています。変更後はありませんlocale
locale
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>
script
myTable.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とは何の関係もありません。私の最後のチャンスは、ロケールが変更されたときにページをリロードすることです。fieldsForTable
filterColumns(columns)
label='Label Name'
label=this.$t('labelName')