Import reusable stuff



  • 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?



  • 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



  • 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
    


  • 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



  • 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?



  • 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 ?


Log in to reply