Vue v-if中对计算属性调用includes/indexOf方法报not a function怎么办？

你在Vuex中初始化state.language时，错误将String构造函数本身作为初始值，而非空字符串。ionViewWillEnter内获取语言的逻辑是异步执行的，组件首次渲染时，语言接口还未返回结果，此时计算属性language拿到的值是String函数类型，自然没有includes、indexOf这类字符串实例方法，因此触发报错。

你之前用typeof language === 'string'判断可正常显示，是因为初始状态下该判断不成立，不会执行后续字符串方法；等异步赋值完成后language变为字符串类型，判断成立才渲染标签，因此不会触发报错。

方案1：修正Vuex state初始值（推荐） #

将state中language的初始值改为空字符串，从根源避免初始类型错误：

state: {
    // 原写法language: String是把String构造函数作为值，改为空字符串作为初始值
    language: '',
}

方案2：模板判断增加类型校验兜底 #

如果不想修改state初始化逻辑，可在v-if判断中先校验类型再调用字符串方法，双重保障：

<ion-label v-if="typeof language === 'string' && language.includes('en')">Play as guest</ion-label>

方案3：Mutation层增加类型转换 #

如果不确定接口返回的语言值一定为字符串类型，可在Mutation中强制转换为字符串：

mutations: {
    setLanguage(state, payload) {
        state.language = String(payload);
    }
}

内容的提问来源于stack exchange，提问作者atk9022