CODEWITHSUNDEEP
vue.jsvue-i18n
Siva G
Siva G

Reputation: 1174

Fetching property from vue-i18n file using vue js

Need to get the value from my locale.js file by referring it in the customer.vue file.

here are the code snippet's:

locale.js

module.exports = {
  de: {
    labels: {
        customer: {
            salutation: 'Anrede',
            firstname: 'Vorname',
            surname: 'Nachname',
            birthdate: 'Geburtsdatum',
            errormessages: {
                required: 'Eingabe erforderlich',
                invalidmailaddress: 'Ungültige Mailadresse',
                mailaddressnotmatched: 'Mailadressen sind unterschiedlich',
                invaliddate: 'Das Datum ist ungültig',
                invalidmobileno: 'ungültige Handynummer'
            }
        }
      }
    }
  }

customer.vue

 export default {
  name: 'customer',
  methods: {
    errorMessage: function (fieldName) {
      if (this.errors[ fieldName ] === required) {
        return this.$i18n.t('messages.errormessages.required')
      } else if (this.errors[ fieldName ] === mailInvalid) {
        return this.$i18n.t('messages.errormessages.invalidmailaddress')
      } else if (this.errors[ fieldName ] === mailNotEqual) {
        return this.$i18n.t('messages.errormessages.mailaddressnotmatched')
      } else if (this.errors[ fieldName ] === dateInvalid) {
        return this.$i18n.t('messages.errormessages.invaliddate')
      } else if (this.errors[ fieldName ] === lengthInvalid) {
        if (!String.format) {
          String.format = function (format) {
            var args = Array.prototype.slice.call(arguments, 1)
            return format.replace(/{(\d+)}/g, function (match, number) {
              return typeof args[number] !== 'undefined'
                ? args[number]
                : match
            })
          }
        }
        return String.format(this.$i18n.t('messages.errormessages.invalidlength'), this.validationLength[fieldName])
      } else if (this.errors[ fieldName ] === mobileNrInvalid) {
        return this.$i18n.t('messages.errormessages.invalidmobileno')
      }
      return ''
    }
  }
}

main.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App'
import VueRouter from 'vue-router'
import VueGtm from 'vue-gtm'
import VueScrollTo from 'vue-scrollto'
import messages from './locale'

Vue.config.productionTip = false

Vue.use(VueRouter)

Vue.use(VueGtm, {
  debug: false // Whether or not display console logs debugs (optional)
})

Vue.use(VueScrollTo)

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
  ]
})

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'de',
  messages
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  i18n
})

the error what i am getting is "this.$i18n.t('messages.errormessages.invaliddate')" this is statement is not giving a data which is available in the locale.js. but i can use this value in the template but in the js block it is failing.

Upvotes: 1

Views: 2223

Answers (1)

Dencio
Dencio

Reputation: 518

Are you using kazupon/vue-18n?

Probably you are pointing to the wrong object.

Try to use:

this.$i18n.t('label.customer.errormessages.invaliddate')

If you have error on that line, and forgot to add type definition for $i18n

Try accessing below:

this._i18n

Upvotes: 1

Related Questions