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 ?

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?

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

I also had this editor problem and i solved it like in: https://forum.quasar-framework.org/topic/3607/solved-qpopupedit-in-qtable-with-vuex-data-source-do-not-emitted-save-event/29

In data i have content_sv as a local var:

export default {
  mixins: [validation, rules],
  data() {
    return {
      content_sv: '',

that i populate with the data from API result:

this.content_sv = this.postEdit.content_sv

the on post to API i do the same:

async doUpdatePost(postEdit, level) {
      this.postEdit.content_sv = this.content_sv

maybe a bit hacky but it works.

Please tell me if there is a more correct way to solve this?

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?

Just so i understand. I also had the problem with “do not mutate vuex store state outside mutation handlers” and i now have a local baseFilter in data:

 data() {
    return {
       baseFilter: {},
...

and then i update vuex in watch like this:

methods: {
    ...mapActions('filter', ['setPostsFilter']),
   ...

 watch: {
    baseFilter: {
      handler() {
        this.setPostsFilter({
          open: this.baseFilter.open,
          deleted: this.baseFilter.deleted,
          post_type: this.baseFilter.post_type,
          search: this.baseFilter.search
        })
      },
      deep: true
    }
  },

and then i get the state from vuex on mount like this:

computed: {
    ...mapState('filter', ['postsFilter'])
......

mounted() {
    this.baseFilter = this.postsFilter
...

is this an okay solution @metalsadman ?

Thank you @metalsadman for helping me, this works great i just had to ad the setAuthHeader upon login.

This is my working auth store action:

import { axiosInstance, setAuthHeader } from 'boot/axios'
export const login = async (context, data) => {
  try {
    const res = await axiosInstance.post('api/auth/loggain', {
      email_address: data.email_address,
      password: data.password
    })
    if (res.data.count) {
      console.log('error')
    } else {
      if (res.data.status === 'success') {
        const token = res.data.payload.token
        const user = res.data.user
        context.commit('setUser', { user, token })
        setAuthHeader(token) <--------- THIS WAS ADDED
        return user
      } else {
        console.log(res.data.status)
      }
    }
  } catch (error) {
    return false
  }
}
export const logout = async function(context) {
  context.commit('clearUser')
  this.$router.push({ path: '/utloggad' })
}

Since i’m new to Quasar i’m sure you will find stuff that can be improved here

Also, i’m running Quasar in SSR

Ok, so now i have this:

export default ({ store, Vue }) => {
  const token = store.state.auth.user.token
  token && setAuthHeader(token)
  Vue.prototype.$axios = axiosInstance
}

export { axiosInstance }
export const setAuthHeader = (token) => {
  axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + token
}

still need to reload browser but i guess i don’t doing it right?

Hi guys,
This is my axios boot and all is good except i need to reload browser after login to get the token for the auth that i need to make API requests.

What am i missing?

import axios from 'axios'
const axiosInstance = axios.create({
  baseURL: process.env.PROD
    ? 'https://XXXXXXXXXXXXXXXX'
    : 'http://127.0.0.1:4000',
  timeout: 1000,
  headers: {
    'X-Client-App-Key': 'XXXXXXXXXXXXXXXX',
    'Content-Type': 'application/json'
  }
})

export default ({ store, Vue }) => {
  const token = store.state.auth.user.token

  if (token) {
    Vue.prototype.$axios = axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + token
  }
}

export { axiosInstance }