Problem
I am facing an issue while trying to determine if a string contains a substring within the Vues v-if directive. The error message I receive is:
TypeError: $options.language.includes is not a function
The technologies I am using are Vue, Vuex, and Ionic.
The 'language' property is a computed property:
computed: {
language() {
return this.$store.getters.getLanguage;
}
}
And here is how the v-if directive looks like:
<ion-label v-if="language.includes('en')">Play as guest</ion-label>
This is what the computed property setup in the store looks like:
state: {
language: String,
}
Mutations:
mutations: {
setLanguage(state, payload) {
state.language = payload;
}
}
Actions:
actions: {
setLanguage(state, language) {
state.commit('setLanguage', language);
}
}
Getter:
getters: {
getLanguage: state => state.language,
}
The language property gets its value using the Ionics ionViewWillEnter hook:
async ionViewWillEnter() {
const info = await Device.getLanguageCode();
this.$store.dispatch('setLanguage', info.value);
}
This method triggers when the component routing into view starts animating.
Attempts made to resolve
- I have checked that the computed property is of type string using typeof
<ion-label v-if="typeof language === 'string'">Play as guest</ion-label>
Since the label is displayed, it confirms that the computed property is indeed a string.
- I also attempted using indexOf
language.indexOf('en') > -1
However, this resulted in the error:
TypeError: $options.language.indexOf is not a function
At this point, I'm unsure of how to proceed. My goal is to check if the computed property string includes a specific substring within the v-if directive. Any suggestions on how to achieve this would be greatly appreciated. Thank you for your assistance!