时间戳

首页 > 解决方案 > TypeError：无法在 VueJS 的上下文中读取未定义的属性“替换”

vue.js - TypeError：无法在 VueJS 的上下文中读取未定义的属性“替换”

问题描述

我正在过滤字符串中的一些字符。我遇到了几个有相同问题的问题，即控制台中的错误，但找不到任何好的答案。

这是我的字符串：

response_out1|response_out2|response_out3

这是我使用的方法：

<vs-select v-model="change">
    <vs-select-item  :key="index" v-bind="item" v-for="(item,index) in 
        userFriendly(out.changes)" />
</vs-select>  

... 

methods: {
        userFriendly (str){
            return str.replace(/_/g, ' ').split('|').map(value => ({text: value, value }))
}

这是我在 vs-select 中得到的输出：

response out1
response out2
response out3

我在控制台中遇到的错误：

在此处输入图像描述

在这里，我想知道为什么我会收到这个错误，我想知道如何纠正它，我期望的输出是：Response Out1，这里如何以相同的方法将每个单词的第一个字符大写。

标签： vue.jsfilterreplace

解决方案

您在模板中直接使用一种方法，每当您的数据更改时会导致多次调用，您可以使用计算属性来避免这种情况，不确定您是如何访问的out.changes

这可能会帮助您解决错误并大写文本，

capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
},
sentenceCase (sentence) {
    return sentence.split(' ').map(s => this.capitalize(s)).join(' '));
},
userFriendly (str) {
    if (!str) return;
    return str.replace(/_/g, ' ').split('|').map(value => ({text: this.sentenceCase(value), value }))
},

推荐阅读