CODEWITHSUNDEEP
vue.jsfilterreplace
app_er
app_er

Reputation: 87

TypeError: Cannot read property 'replace' of undefined in the context of VueJS

I am filtering some of the characters from the string. I went across few questions which has a same problem ie error in the console, but could not find any good answers.

Here is my string:

response_out1|response_out2|response_out3

Here is the method that i have used:

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

Here is the output that i am getting in the vs-select:

response out1
response out2
response out3

The error that i am getting in my console:

enter image description here

Here i want to know why i am getting this error and i wanna know how to rectify it and the output that i am expecting is: Response Out1, here how to capitalize first character of each word in the same method.

Upvotes: 0

Views: 1927

Answers (1)

Nik.Developer
Nik.Developer

Reputation: 131

you're using a method directly in the template which causes multiple calls whenever your data changes, you can use computed property to avoid such a scenario, not sure about how you are accessing out.changes

this might help you to solve your error and capitalize your text,

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 }))
},

Upvotes: 1

Related Questions