vue.js - TypeError: Cannot read property 'replace' of undefined in the context of VueJS

Question

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:

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.

question from:https://stackoverflow.com/questions/65885092/typeerror-cannot-read-property-replace-of-undefined-in-the-context-of-vuejs

Answer 1

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