3

我在一个 vue 项目中使用vue-i18n 。而且我发现在i18n中使用 vue 中的一些数据时真的很混乱。data然后，如果我更改locale，该数据不是反应性的。我试图data从另一个返回它，computed data但无论如何它不是反应性的，因为 i18n 是用data. *我的情况 - *我想在其上方显示带有下拉列表（带有复选框的列列表）的表格。当用户检查一列时，如果取消选中，它将显示在表格中。在我改变之前它工作正常。改变后不localelocale 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(in computed) 并将其返回到fieldsForTable内部filterColumns(columns)方法时，它实际上返回数组（对象）而label='Label Name'不是label=this.$t('labelName')。所以过滤后的新数组与vue-i18n无关。我最后的机会是在语言环境更改时重新加载页面。

4

1 回答 1

2

尝试修改computedFieldsForTable如下。你需要引用this.columnsin computedFieldsForTable，这样 Vue 才能检测到 .in 中标签的变化this.columns。

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

编辑：把你this.columns的数据。然后

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

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

编辑（再次）：

也许这是我认为它可以工作的最后机会。静置columns并computed()取出computedFieldsForTable。最后，只需离开fieldsForTable并将其绑定在fieldsof 上即可<b-table>。

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

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

于 2019-04-02T14:26:25.397 回答