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.

    <template>
    <div>
        <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>
            </q-tr>
          </template>
        </q-table>
      </div>
    </div>
    </template>
    
    <style scoped>
    </style>
    
    <script>
    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'
          }
          ]
        }
      }
    };
    </script>
    


  • Have the same issue…


Log in to reply