Unable to translate the Q-table headers

  • Hello,

    I am not understanding the issue.

    The Q table headers are not translating. It is very strange because if I add $t(‘tables.surname’) to the template layout, it works on the fly, I can change the languages without any issues but as soon as I add this.$t(‘tables.surname’) in my columns object, the reactivity is not there. Any idea why, please?
    I thought perhaps I needed to add it to a computed property but is it possible to add an object as computed? If yes would you have an example please? Thank you.

        <q-table :data="data" :columns="columns" row-key="name" :pagination.sync="pagination">
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td key="name" :props="props">{{ props.row.name }}</q-td>
              <q-td key="surname" :props="props">{{ props.row.surname }}</q-td>
    <style scoped>
    export default {
      data () {
        return {
          pagination: {
            rowsPerPage: 0,
            page: 1
          selected: [],
          columns: [
            name: 'name',
            align: 'center',
            label: this.$t('tables.name'),
            field: 'name',
            sortable: true
            name: 'surname',
            align: 'center',
            label: this.$t('tables.surname'),
            field: 'surname',
            sortable: true
          data: [{
            name: 'Name1',
            surname: 'name 1',
          name: 'Name2',
          surname: 'name 2'

  • Have the same issue…

Log in to reply