vue.js - Cannot read property 'toLowerCase' of undefined

Question

I am filtering projects with a computed property like this:

filtered_projects() {
    return this.projects.filter( (project)  =>  {
        return project.title.toLowerCase().indexOf(this.project_filter.toLowerCase()) !== -1
    })
}

When I add a new project using this

submitNewProject() {
   let path = '/api/projects';
   Vue.http.post(path, this.project)
       .then( (rsp) => {
          this.projects.push(rsp.data);
          this.project = this.getSingleProject();
          this.create_project = false;
          return true;
    });
 }

This is giving me an error that I can't find

TypeError: Cannot read property 'toLowerCase' of undefined

Answer 1

It may just be that you are not correctly passing the projects data to the projects array.

Firstly vue-resource now uses body not data to get the response, therefore you may need to use:

this.projects.push(rsp.body)

then this will give you a single array item containing all projects which doesn't look like what you want. I believe instead you're after:

this.projects = rsp.body

Assuming the response body is an array of objects this will then allow:

this.projects.filter(project => {})

to work as expected. Meaning project.title should now be valid

EDIT

For a project title to be set to lowerCase you must be returning an object with a title param, i.e.

rsp.body = {
  title: 'FOO',
}

which you'd then set on the projects array via:

this.projects.push(rsp.body)

so the first thing to fix is your response, sort your endpoint so it returns what you are expecting, then the rest of the above code should work