Estoy construyendo una aplicación nuxt.js. Entonces, mi plan es inyectar objetos y funciones auxiliares que se reutilizan en el contexto.

Entonces creé un complemento

export default (context) => {
     const { $t } = context.app;

     const validators = {
      firstNameRules: [
         v => !!v || $t('formValidation.NO_FIRST_NAME'),
         v => v.length < 128 || $t('formValidation.INVALID_FIRST_NAME_TOO_LONG')
       ]
     };

     context.$formValidators = validators;
}

El objeto se inyecta al contexto correctamente y puedo acceder a las reglas donde quiero. Sin embargo, intentar ejecutar la función $ t me lleva a un error

Cannot read property '_t' of undefined 

Básicamente, me gustaría ejecutar la función $ t y obtener un mensaje localizado cuando sucedan cosas. ¿Es eso posible y si es así, cómo?

errror compiling message

0
Rouz 5 feb. 2019 a las 18:38

2 respuestas

La mejor respuesta

Así que finalmente logré resolverlo.

Entonces la cosa está en la forma en que this se comporta en JS 🙄

Cambié el código para que sea así:

export default function(context) {
  function getValidators() {
    return {
      firstNameRules: [
        v => !!v || this.$t('formValidation.NO_FIRST_NAME'),
        v => v.length < 128 || this.$t('formValidation.INVALID_FIRST_NAME_TOO_LONG')
      ]
    };
  }

  Vue.prototype.$formValidators = getValidators;
  context.$formValidators = getValidators;
}

Y luego desde mi componente / página

data() {
  const { firstNameRules } = this.$formValidators();
}

Al hacer cosas así, this se conserva hasta la función $t

0
Rouz 5 feb. 2019 a las 17:12

Intente utilizar un inject:

export default (context, inject) => {
  const { $t } = context.app;
  const validators = {
    firstNameRules: [
      v => !!v || $t('formValidation.NO_FIRST_NAME'),
      v => v.length < 128 || $t('formValidation.INVALID_FIRST_NAME_TOO_LONG')
    ]
  };

  context.$formValidators = validators;
  inject('formValidators', validators);
};
0
gleam 5 feb. 2019 a las 17:39