Question

我在vue项目中使用 vue-i18n 。当在i18n的vue data中使用某些数据时，我发现它确实使 令人困惑的 。然后，如果我更改locale，则该数据不会处于活动状态。我试图从另一个data返回那个computed data，但是无论如何它都不是 active ，因为i18n是用data编写的。 *我的情况-* 我想显示表，并在其上方显示下拉列表（带复选框的列列表）。用户选中时，如果没有 取消选中 ，则会在表中显示该列。在我更改locale之前，它一直有效。更改locale后，table columns不会进行翻译，但会dropdown items进行响应翻译，因此我的代码将无法再使用。以下是一些可以更好解释的代码：在我的myTable.vue组件中，使用 bootstrap-vue表- {em> myTable.vue

中的template

<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>

myTable.vue

中的

script

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 无关。我最后一次机会是在更改区域设置时重新加载页面。

Answer 1

尝试如下修改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的{{1}}上。

<b-table>

但是，我认为只要本地更改，重新加载页面会更好，更轻松。尤其是当您的watch: { columns(val) { this.fieldsForTable = this.filterColumns(val) } }, method: { columnListener ($event) { this.fieldsForTable = this.filterColumns($event) } }具有更复杂的数据结构时。

为什么在vue data（）中很难使用vue-i18n（为什么它不具有反应性）

1 个答案:

再次编辑：