时间戳

首页 > 解决方案 > 为什么在使用计算属性时不能在 v-if 中的字符串上使用 .includes？

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

问题描述

问题

我正在尝试确定字符串是否包含 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);
    }

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

解决方案的尝试

  1. 我已使用 typeof 确保计算的属性是字符串类型
<ion-label v-if="typeof language === 'string'">Play as guest</ion-label>

显示标签意味着计算的属性是一个字符串

  1. 我试过使用 indexOf
language.indexOf('en') > -1

但这会导致：

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

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

标签： javascriptvue.js

解决方案

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

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

问题是：

    state: {
        language: String,
    }

除非此代码属于使用特殊逻辑检查道具类型并接受原始类型的构造函数的组件道具，否则这意味着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');
    }
}

推荐阅读