为什么在使用计算属性时不能在 v-if 中的字符串上使用 .includes？答案

【问题标题】：Why can't I use .includes on a string in v-if when using a computed property?为什么在使用计算属性时不能在 v-if 中的字符串上使用 .includes？
【发布时间】：2021-10-28 06:38:33
【问题描述】：

问题

我正在尝试确定字符串是否包含 Vues v-if 指令中的某些子字符串。当我这样做时，我收到以下错误：

TypeError: $options.language.includes is not a function

我正在使用 Vue、Vuex 和 Ionic。

语言是计算属性：

    computed: {
        language() {
            return this.$store.getters.getLanguage;
        }
    }

v-if 看起来是这样的：

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

这是计算属性在商店中的样子：

    state: {
        language: String,
    }

突变：

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

动作：

actions: {
        setLanguage(state, language) {
            state.commit('setLanguage', language);
        }
}

吸气剂：

    getters: {
        getLanguage: state => state.language,
    }

并且语言是在 Ionic 钩子 ionViewWillEnter 中设置的：

    async ionViewWillEnter() {
        const info = await Device.getLanguageCode();
        this.$store.dispatch('setLanguage', info.value);
    }

当组件路由到即将动画进入视图时触发

解决方案的尝试

我已使用 typeof 确保计算的属性是字符串类型

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

显示计算属性是字符串的标签

我尝试过使用 indexOf

language.indexOf('en') > -1

但这会导致：

TypeError: $options.language.indexOf is not a function

现在我不太确定如何进行。我需要能够检查计算的属性字符串是否在 v-if 指令中包含一些子字符串。我怎样才能做到这一点？感谢您的帮助！

【问题讨论】：

请提供stackoverflow.com/help/mcve。组件和存储 getter 的外观是未知的。无论如何，把这个逻辑放到模板中是错误的。这正是计算的用途
这不能回答你的问题，但如果你想在你的 html 模板中支持多种语言，那么我建议你查看kazupon.github.io/vue-i18n
@EstusFlask 我添加了更多信息，希望能将其清除。
@bassxzero 如果我要构建更大规模的东西，我肯定会使用 Vue I18n！
请提供整个代码（仅包含相关属性）而不是截断的 sn-ps。如果您知道问题所在并希望显示相关部分，这很好，但如果您不知道要查找的内容，则不是。

标签： javascript vue.js

【解决方案1】：

错误的解释是定义了language（否则错误将是关于缺少includes 属性）但没有includes 方法。这意味着它是一个对象或一个函数。

typeof language === 'string' 条件在某些时候为真意味着值从非字符串变为字符串。

问题是：

    state: {
        language: String,
    }

除非此代码属于使用特殊逻辑检查 prop 类型并接受基本类型的构造函数的组件 props，否则这意味着 state.language 分配有 String 构造函数，即函数。

应该是：

language: null,

或

language: '',

或

language: 'en',

请注意，未初始化的值可能需要特殊处理，null 更可取，因为它指定一个值未初始化并导致明确的错误。在这种情况下，它将是：

无法读取 null 的属性“包含”

将逻辑放入模板是一种不好的做法。这使得调试和处理值变得更加困难，也可能导致密集计算的性能问题。这是计算属性的用例：

computed: {
    language() {
        return this.$store.getters.getLanguage;
    },
    isDefaultLanguage() {
        return !this.language || this.language.includes('en');
    }
}

【讨论】：