Set data property reactive-CodePudding

I have a data property for vue good table as:

 data() {
    return {
      columns: [
        {
          label: this.$i18n.t('test1'),
          field: 'typeName',
          
        },
        {
          label: this.$i18n.t('test2'),
          field: 'groupName',
        }
      ],
    }
  },

As you can see, I'm using i18n to translate the label depending of the selected page language, but this is not reactive, I need to refresh once language is changed.

Is there a way to do this property label reactive?

CodePudding user response：

As a rule of thumb, t calls need to be done either in a template (render function) or inside computed property:

columns() {
  return [
    {
      label: this.$i18n.t('test1'),
      field: 'typeName',
      
    },
    {
      label: this.$i18n.t('test2'),
      field: 'groupName',
    }
  ];
}

This way the change of i18n.locale can trigger an update.