Tema
Estoy tratando de determinar si una cadena incluye o no alguna subcadena en la directiva Vues v-if. Cuando lo hago, me sale el siguiente error:
TypeError: $options.language.includes is not a functionEstoy usando Vue, Vuex y Ionic.
Donde el lenguaje es una propiedad calculada:
computed: { language() { return this.$store.getters.getLanguage; } }Y el v-si se ve así:
<ion-label v-if="language.includes('en')">Play as guest</ion-label>Así es como se ve la propiedad calculada en la tienda:
state: { language: String, }Mutaciones:
mutations: { setLanguage(state, payload) { state.language = payload; } }Comportamiento:
actions: { setLanguage(state, language) { state.commit('setLanguage', language); } }Adquiridor:
getters: { getLanguage: state => state.language, }Y el idioma se establece en el gancho iónico ionViewWillEnter:
async ionViewWillEnter() { const info = await Device.getLanguageCode(); this.$store.dispatch('setLanguage', info.value); }Que se dispara cuando el enrutamiento del componente está a punto de animarse a la vista
Intentos de solución
<ion-label v-if="typeof language === 'string'">Play as guest</ion-label>Que muestra la etiqueta que significa que la propiedad calculada es una cadena
language.indexOf('en') > -1Pero esto resulta en:
TypeError: $options.language.indexOf is not a functionY ahora no estoy muy seguro de cómo proceder. Necesito poder verificar si la cadena de propiedad calculada incluye o no alguna subcadena en la directiva v-if. ¿Cómo puedo conseguir esto? ¡Gracias por tu ayuda!
La explicación del error es que el language está definido (de lo contrario, el error se debe a que falta la propiedad includes ) pero no tiene el método de includes . Esto significa que es un objeto o una función.
El hecho de que typeof language === 'string' sea verdadera en algún momento significa que un valor cambia de no cadena a cadena.
El problema es:
state: { language: String, } A menos que este código pertenezca a accesorios de componentes que usen una lógica especial para verificar tipos de accesorios y acepte constructores para tipos primitivos, esto significa que state.language se asigna con un constructor de String , es decir, una función.
Debería ser:
language: null,o
language: '',o
language: 'en', Tenga en cuenta que el valor no inicializado puede necesitar un tratamiento especial, es preferible null porque indica que un valor no está inicializado y da como resultado errores claros e inequívocos. En este caso sería:
No se puede leer la propiedad 'incluye' de nulo
Es una mala práctica poner lógica en las plantillas. Esto hace que sea más difícil depurar y manejar valores, y también puede causar problemas de rendimiento para cálculos intensivos. Este es el caso de uso para las propiedades calculadas:
computed: { language() { return this.$store.getters.getLanguage; }, isDefaultLanguage() { return !this.language || this.language.includes('en'); } }