Почему трудно использовать vue-i18n в данных vue () (почему он не реагирует) - PullRequest
Новая
       22

Почему трудно использовать vue-i18n в данных vue () (почему он не реагирует)

1 голос
/ 01 апреля 2019

Я использую vue-i18n в проекте vue. И я обнаружил, что это действительно сбивает с толку при использовании некоторых данных в vue data с i18n. Затем, если я изменю locale, эти данные не будут реактивными . Я пытался вернуть это data из другого computed data, но в любом случае это не реактивный , потому что i18n записан в data. * Моя ситуация - * Я хочу показать таблицу с выпадающим (список столбцов с флажком) над ним. Когда пользователь проверяет столбец, он будет показан в таблице, если снимает отметку , это не так. Работает нормально пока я не поменяю locale. После изменения locale table columns не переводится , но dropdown items переводится реактивно, и мой код больше не работает. Вот некоторый код, чтобы объяснить лучше: В моем myTable.vue компоненте я использую таблицу начальной загрузки - 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)
  }
}

Может кто-нибудь дать мне совет для этой ситуации?

* РЕДАКТИРОВАТЬ ПОСЛЕ НЕКОТОРЫЕ ОТЛАДКИ: Я думаю, что при фильтрации columns (в computed) и возврате его для fieldsForTable внутри filterColumns(columns) метода, он на самом деле возвращает массив (из объектов) с label='Label Name', а не label=this.$t('labelName'). Поэтому после фильтрации новый массив не имеет ничего общего с vue-i18n . Мой последний шанс - перезагрузить страницу при изменении локали.

1 Ответ

1 голос
/ 02 апреля 2019

Попытка изменить computedFieldsForTable следующим образом.Вам нужно сослаться на this.columns в computedFieldsForTable, чтобы Vue могла обнаружить изменение меток в this.columns. 

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

РЕДАКТИРОВАНИЕ: введите this.columns в данные.Тогда 

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

Надеюсь, я не неправильно понял, что вы имеете в виду.

РЕДАКТИРОВАНИЕ (еще раз):

Может быть, это последний шанс, который, я думаю, может сработать,Поместите columns в computed() неподвижно и удалите computedFieldsForTable.Наконец, просто оставьте fieldsForTable и свяжите его с fields из <b-table>. 

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

Однако я думаю, что лучше и проще перезагрузить страницу всякий раз, когда локальное изменение .Особенно, когда ваши columns имеют более сложную структуру данных.

...