Why it is hard to use vue-i18n in vue data() (why it is not reactive)

Question

I am using vue-i18n in a vue project. And I found it really confusing when using some data in vue data with i18n. Then if I change locale, that data is not reactive. I tried to return that data from another computed data but anyways it is not reactive because i18n is written in data. *My situation - * I want to show table with dropdown(list of columns with checkbox) above it. When user checks a column it will be showed in table if unchecks it won't. It is working fine until I change locale. After changing locale table columns is not translated but dropdown items is reactively translated and my code won't work anymore. Here is some code to explain better: In my myTable.vue component I use bootstrap-vue table - template in 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 in 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)
  }
}

Can someone give me some advice for this situation ?

*EDIT AFTER SOME DEBUGGING: I think when filtering columns(in computed) and returning it for fieldsForTable inside filterColumns(columns) method, it actually returning array(of objects) with label='Label Name' not label=this.$t('labelName'). So after filtering the new array has nothing to do with vue-i18n. My last chance is reloading the page when locale changes.

Sorry. I'm confusing that which part do you use `vue-i18n`. I don't see any `$t` or `locale` changed in your code. — bcjohn, Apr 01 '19 at 14:01
@bcjohn sorry, I edited the question. I am using it in `computed()` -> `columns` — Bakhtiyor Sulaymonov, Apr 01 '19 at 14:49

bcjohn · Accepted Answer · 2019-04-04T07:08:02.753

2

Trying modify computedFieldsForTable as follows. You need to reference this.columns in computedFieldsForTable, so that Vue can detect the change of labels in this.columns.

computedFieldsForTable () {
   return this.filterColumns(this.columns);
},

EDITED: put your this.columns in data. Then

columnListener ($event) {
  this.columns = $event;
}

I hope i didn't misunderstand what you mean.

EDITED (again):

Maybe this is the last chance that I think it can work. Put columns in computed() still and remove computedFieldsForTable. Finally, just leave fieldsForTable and bind it on fields of <b-table>.

watch: {
  columns(val) {
    this.fieldsForTable = this.filterColumns(val)
  }
},
method: {
  columnListener ($event) {
    this.fieldsForTable = this.filterColumns($event)
  }
}

However, I think it is better and easier to reload page whenever local change. Especially when your columns have a more complex data structure.

edited Apr 04 '19 at 07:08

answered Apr 02 '19 at 14:26

bcjohn

2,383
12
27

I tried your suggestion, translation worked fine. But in this case how to write my `columnListener($event)` method, because I need it to **show and hide** *table columns*. It is called from `vs-dropdown-menu` -> `visible-columns` (when user checks or unchecks the **column name**) and it receives *changed* array of column names – Bakhtiyor Sulaymonov Apr 02 '19 at 16:12
Thank you for your answers @bcjohn. I tried your *edited answer* but now when `locale` changes **table headers** and **dropdown items** is not translated *reactively*. I think the reason is putting `columns` in `data()` – Bakhtiyor Sulaymonov Apr 03 '19 at 15:37
Thank you @bcjohn, You are the man. **That watcher** helped me to fix that translation issue. I tried to put `watcher` to `locale` didn't help, why I haven't thought about the `columns` earlier. I think your answer best suits this kind of tricky situation. Accepted it. – Bakhtiyor Sulaymonov Apr 04 '19 at 13:08

Why it is hard to use vue-i18n in vue data() (why it is not reactive)

1 Answers1

EDITED (again):