vendredi 14 août 2020

Access to Vue Translation in a JS file

I am using Vue 2.6 and Vuetify 2.3 as front-end framework in a Project I am having some forms which all share common inputs like email so I am trying to create a separate JS file for checking the rules of form fields and use it in all forms to avoid redundancy. This is a part of JS file

vuetifyRules.js

export default {
   methods: {
        nameRules(value) {
            return [
                value => !!value || 'Name is Required',
                value => value.length > 1 || 'Minimum Length is 2.'
            ]
        },
        desriptionRule(value) {
            return [
                value => !!value || 'Desription is Required',
                value => value.length > 1 || 'Minimum Length is 2.'
            ]
        }

And this is one of the module which using the rules above

AddDepartment.vue

<template>
 //some odes here
<v-text-field 
    :rules="[rules.name]"
 ></v-text-field>
</template>

<script >
  //some codes here
  import VuetifyRules from vuetifyRules
   mixins: [VuetifyRules], 
  rules: {
     name: vaule => this.nameRules(value)
  }
</script>

Which is working, I am encountering the issue when I need to translate the error messages, what is the best practice to use Vue translation in this scenario?

Aucun commentaire:

Enregistrer un commentaire