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

1. I have made sure the computed property is of type string using typeof

<ion-label v-if="typeof language === 'string'">Play as guest</ion-label>

Which displays the label meaning the computed property is a string

2. I have tried using indexOf

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!

CodePudding user response：

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');
    }
}

CodePudding user response：

You probably get this error because language returns null of undefined, You can catch this error by returning an empty string when its null:

computed: {
  language() {
    return this.$store.getters.getLanguage ?? ""; // will return `""` when this.$store... is null or undefined
  }
}