3

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

jgravois
  • 2,559
  • 8
  • 44
  • 65

2 Answers2

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

GuyC
  • 6,494
  • 1
  • 31
  • 44
  • this.projects.push(rsp.body) didn't change the error. – jgravois Nov 26 '16 at 18:44
  • this.projects = rsp.body created a new error "TypeError: this.projects.filter is not a function" – jgravois Nov 26 '16 at 18:45
  • what does the response look like? Is it an object or array or objects? – GuyC Nov 26 '16 at 18:45
  • yeah `.filter` will only work against an array - is this what you have? – GuyC Nov 26 '16 at 18:47
  • can you post the response content – GuyC Nov 26 '16 at 18:47
  • Response body : 8 bodyBlob : Blob bodyText : PromiseObj data : 8 get data : () set data : (body) headers : Headers ok : true status : 200 statusText : "OK" url : "/api/projects" __proto__ : Object – jgravois Nov 26 '16 at 18:49
  • I was hoping you'd just show me an object :) but assuming that's what it is perhaps the endpoint isn't passing it as json, but instead text, try and convert the response before pushing to the array, i.e. `this.projects.push(rsp.json())` – GuyC Nov 26 '16 at 18:53
  • that'll be your problem then - you're returning an integer not an object. Updated answer to reflect this – GuyC Nov 26 '16 at 19:02
0

You need preserve "this" before Vue.http.post (self=this) and then in callback change this.projects to self.projects. Explanation: How to access the correct `this` context inside a callback?

Community
  • 1
  • 1
Gena
  • 36
  • 2