Issue
I am trying to determine whether or not a string includes some substring in Vues v-if directive. When I do, I get the following error:
TypeError: $options.language.includes is not a function
I am using Vue, Vuex and Ionic.
Where language is a computed property:
computed: {
language() {
return this.$store.getters.getLanguage;
}
}
And the v-if looks as such:
<ion-label v-if="language.includes('en')">Play as guest</ion-label>
Here is what the computed property looks like in the store:
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,
}
And the language is set in the Ionic hook ionViewWillEnter:
async ionViewWillEnter() {
const info = await Device.getLanguageCode();
this.$store.dispatch('setLanguage', info.value);
}
Which fires when the component routing to is about to animate into view
Attempts at solution
<ion-label v-if="typeof language === 'string'">Play as guest</ion-label>
Which displays the label meaning the computed property is a string
language.indexOf('en') > -1
But this results in:
TypeError: $options.language.indexOf is not a function
And now I'm not quite sure how to proceed. I need to be able to check whether or not the computed property string includes some substring in the v-if directive. How can I achieve this? Thank you for your help!
The explanation for the error is that language is defined (otherwise the error would be about missing includes property) but doesn't have includes method. This means that it's an object or a function.
That it typeof language === 'string' condition is true at some point means that a value changes from a non-string to a string.
The problem is:
state: {
language: String,
}
Unless this code belongs to component props that use special logic to check prop types and accepts constructors for primitive types, this means that state.language is assigned with String constructor, i.e. a function.
It should be:
language: null,
or
language: '',
or
language: 'en',
Notice that uninitialized value may need a special treatment, null is preferable because it designates that a value is uninitialized and results in clear unambiguous errors. In this case it would be:
Cannot read property 'includes' of null
It's a bad practice to put logic into templates. This makes it harder to debug and handle values, also may cause performance issues for intensive calculations. This is the use case for computed properties:
computed: {
language() {
return this.$store.getters.getLanguage;
},
isDefaultLanguage() {
return !this.language || this.language.includes('en');
}
}