为什么很难在 vue data() 中使用 vue-i18n（为什么它不是反应式的）

Question

我在 vue 项目中使用 vue-i18n。我发现在 vue data 和 i18n 中使用一些数据时，它确实 令人困惑 。然后，如果我更改 locale，则该数据不会 反应 。我试图从另一个 computed data return data 但无论如何它不是 反应性 因为 i18n 是用 data 写的。 *我的情况 - * 我想用 dropdown（列列表）显示 table上面有复选框）。当用户选中一列时，如果取消选中[=57，它将显示在table中=]不会。在我更改 locale 之前，它工作 很好 。更改后 locale table columns 不是 translated 但 dropdown items 被反应翻译，我的代码将不再工作。这里有一些代码可以更好地解释：在我的 myTable.vue 组件中，我使用 bootstrap-vue table - 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 中）并在 filterColumns(columns) 方法中 return 对 fieldsForTable 进行过滤时，它实际上 returning array(of objects) with label='Label Name' 而不是 label=this.$t('labelName')。所以过滤后新数组与vue-i18n无关。我最后的机会是在区域设置更改时重新加载页面。

Answer 1

尝试修改 computedFieldsForTable 如下。需要在computedFieldsForTable中引用this.columns，这样Vue才能检测到this.columns.

中标签的变化

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

已编辑：将您的 this.columns 放入数据中。那么

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

希望我没有误会你的意思。

已编辑（再次）：

也许这是我认为它能奏效的最后机会。将 columns 仍然放在 computed() 中并删除 computedFieldsForTable。最后留下fieldsForTable绑定在<b-table>的fields上即可。

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

但是，我认为每当 本地更改 时重新加载页面会更好也更容易。尤其是当您的 columns 具有更复杂的数据结构时。