Import reusable stuff

PeterQF

Hi guys,

So i have this in my data:

functionOptions: {
        functions0: [
          {
            functionIcon: 'add',
            functionLabel: 'general.functions.createItem',
            functionValue: 'createItem'
          },
          {
            functionIcon: 'delete',
            functionLabel: 'general.functions.destroy',
            functionValue: 'doDestroy'
          },
          {
            functionIcon: 'lock_open',
            functionLabel: 'general.functions.unlock',
            functionValue: 'doUnlock'
          }
        ],
        functions1: [
          {
            functionIcon: 'restore',
            functionLabel: 'general.functions.restore',
            functionValue: 'doRestore'
          },
          {
            functionIcon: 'delete_forever',
            functionLabel: 'general.functions.delete',
            functionValue: 'doDelete'
          }
        ]
      },

this will be used in a lot of files and i wonder what is the best way to have this in a like “helper file” and import it in every page i want to use it?

s.molinari

It’s an object, so just export it.

export const functionOptions = {
        functions0: [
          {
            functionIcon: 'add',
            functionLabel: 'general.functions.createItem',
            functionValue: 'createItem'
          },
          {
            functionIcon: 'delete',
            functionLabel: 'general.functions.destroy',
            functionValue: 'doDestroy'
          },
          {
            functionIcon: 'lock_open',
            functionLabel: 'general.functions.unlock',
            functionValue: 'doUnlock'
          }
        ],
        functions1: [
          {
            functionIcon: 'restore',
            functionLabel: 'general.functions.restore',
            functionValue: 'doRestore'
          },
          {
            functionIcon: 'delete_forever',
            functionLabel: 'general.functions.delete',
            functionValue: 'doDelete'
          }
        ]
      }

You might need to import it with an alias, to avoid the “No default export found” es-lint warning. But, it should still work nonetheless.

So…

import * as functionOptions from .....

Scott

PeterQF

Thank you @s-molinari .

Any idea how i can have i18n code in my imported object:

export const deletedOptions = [
  {
    label: this.$t('general.filters.trashedNo'),
    value: 1
  },
  {
    label: this.$t('general.filters.trashedYes'),
    value: 2
  }
]

now i get:

Cannot read property '$t' of undefined

s.molinari

Import i18n into your object. Have a look at pro-tip #2 here: https://medium.com/quasar-framework/adding-full-i18n-to-quasar-150da2d5bba4

Your file would then look something like this.

import { i18n } from 'src/boot/i18n'

export const functionOptions = {
  functions0: [
    {
      functionIcon: 'add',
      functionLabel: i18n.t('add'),
      functionValue: 'createItem'
    },
....

Scott

PeterQF

Thank you @s-molinari , this works but for some reason i have to logout and login to get the new language.

Seems that the translated strings myst be reloaded somehow?

PeterQF

Still struggling with this.

My reactive i18n works fine but the populated q-select wont show new language unless i reload another page and then navigate to it again.

Also on reloading the q-select page i get the default language again.

Any idea how to solve this @s-molinari or @metalsadman ?

No More Posting New Topics!

Import reusable stuff