[Vue warn]: Error in render: "TypeError: post.text.toLowerCase is not a function"

Question

I am getting this error. I am trying to filter my array with my searchbar (input) I am doing search operation as computed.

<div class="post"
    @click="getData(post.header,post.text)"
    v-for="(post) in searchList"
    v-bind:item="post"
    v-bind:key="post._id"
    >

Computed Property

computed:{
  searchList() {
    return this.posts.filter(post => {
      return post.text.toLowerCase().includes(this.lookfor.toLowerCase())
    })
  }
},

Please help me, Thanks

This is where i am calling computed function

This is computed property

This is error

It seems that for at least one of your posts, post.text is not a string. How about adding some simple debugging like this in your filter callback ~ console.log(typeof post.text, post.text) — Phil
– Phil, Commented Jun 15, 2020 at 2:25
you could return simply return post.text && post.text.toLowerCase().includes(this.lookfor.toLowerCase()) — Jhecht
– Jhecht, Commented Jun 15, 2020 at 2:34
@Jhecht it's unlikely that will work. If post.text was null or undefined, the error message would be different. That being said, perhaps post.text is Boolean false for some records — Phil
– Phil, Commented Jun 15, 2020 at 2:38
You need to check your post.text. Only types of String have a method .toLowerCase() — Karma Blackshaw
– Karma Blackshaw, Commented Jun 15, 2020 at 6:28

Phil · Accepted Answer · 2020-06-15 02:58:28Z

1

It seems that for at least one of your posts, post.text is not a string.

The simplest idea would be to filter out these non-strings

computed: {
  searchList () {
    const search = this.lookfor.toLowerCase()
    return this.posts.filter(post => typeof post.text === 'string'
      && post.text.toLowerCase().includes(search))
  }
}

Alternately, you could use a newer feature like Optional Chaining

return post.text.toLowerCase().?includes(search)

edited Jun 15, 2020 at 2:58

answered Jun 15, 2020 at 2:41

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jhecht Over a year ago

you could also just run post.text && post.text.toLowerCase && post.text.toLowerCase().includes(search)

Phil Over a year ago

@Jhecht why perform three evaluations when two gets the job done?

Jhecht Over a year ago

I've seen some codebases that dislike the use of typeof unless absolutely necessary (my previous job being one of them). Should also be noted that you can also option chaining if the target browsers support it (or if you're using babel)

Phil Over a year ago

@Jhecht do you have a reason for disliking it? There are no applicable warnings on the MDN page (just one for old Internet Explorer). Also, did you mean "optional chaining"? If so, then yes, that's an option. I'll add it to my answer

Jhecht Over a year ago

I have no strong feelings about it one way or another. Just putting the information out there. Some people don't like using typeof, so just checking to see if the function exists before calling it would be fine. btw in yur example it should be post.text?.toLowerCase().includes(search) since we're not sure about the text property having the toLowerCase method.

|

Collectives™ on Stack Overflow

[Vue warn]: Error in render: "TypeError: post.text.toLowerCase is not a function"

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related