Updating Language using Inertia.js cause error

[bernardinosousa]

Expected behavior

When changing language should change language

Current behavior

Error when changing language and not working

Snippet calling setLocale <b-dropdown-item v-for="locale in $locales()" :key="locale" @click="$setLocale(locale)">{{ upperCase(locale) }}</b-dropdown-item>

app.js

//...

import {__, setLocale, getLocale, transChoice, MaticeLocalizationConfig, locales} from "matice"

Vue.mixin({
    methods: {
        $__: __,
        $transChoice: transChoice,
        $setLocale: (locale) => {
          setLocale(locale);
          this.$forceUpdate() // Refresh the vue instance after locale change.
        },
        // The current locale
        $locale() {
            return getLocale()
        },
        // A listing of the available locales
        $locales() {
            return locales()
        }
    },
})

const app = document.getElementById('app');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app); 

Versions

• Laravel: 8.19.0
• Matice: 1.1.3
• Inertia.js:0.2.15

[GENL]

Hi! which version of vue are you using? It seems like it is a vuejs issue. Is the mixin properly registered?

[bernardinosousa]

Hello! Vue.js - 2.6.12

[GENL]

How do you import vue? The error indicates that "this" is undefined, which is abnormal for a vue2 app,

[GENL]

It works well for me:

import Vue from 'vue'
import {InertiaApp, plugin} from '@inertiajs/inertia-vue';
// @ts-ignore
import {InertiaForm} from 'laravel-jetstream'
import {__, trans, transChoice, setLocale, locales, getLocale, MaticeLocalizationConfig} from "matice"

Vue.use(InertiaForm);
Vue.use(plugin)

Vue.mixin({
  methods: {
    $trans: trans,
    $__: __,
    $transChoice: transChoice,
    // @ts-ignore
    $setLocale(locale: string) {
      setLocale(locale);
      this.$forceUpdate() // Refresh the vue instance after locale change.
    },
    // The current locale
    $locale() {
      return getLocale()
    },
    $locales() {
      return locales()
    }
  },
});

const root = document.querySelector('#app');

app = new Vue({
  // @ts-ignore
  render: (h) =>
    // @ts-ignore
    h(InertiaApp, {
      props: {
        // @ts-ignore
        initialPage: JSON.parse(root.dataset.page),
        // @ts-ignore
        resolveComponent: (name: string) => require(`./Pages/${name}`).default,
      },
    }),
  // @ts-ignore
}).$mount(root)

[bernardinosousa]

The error is not happening on app.js but inside Pages Vue file.

Snippet calling setLocale

<b-dropdown-item v-for="locale in $locales()" :key="locale" @click="$setLocale(locale)">{{ upperCase(locale) }}</b-dropdown-item>

[GENL]

Do not use arrow function in your mixing because this will not reference your vue component. So replace:

$setLocale: (locale) => {
          setLocale(locale);
          this.$forceUpdate() // Refresh the vue instance after locale change.
        }

By

$setLocale(locale: string) {
      setLocale(locale);
      this.$forceUpdate() // Refresh the vue instance after locale change.
    },