vue.js - 无法读取未定义的属性'toLowerCase'

时间:2016-11-26 18:09:16

标签: vue.js

我正在使用这样的计算属性过滤项目:

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

使用此

添加新项目时
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;
    });
 }

这给了我一个我找不到的错误

  

TypeError:无法读取未定义的属性'toLowerCase'

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

你需要保留"这个"在Vue.http.post(self = this)之前然后在回调中将this.projects更改为self.projects。 说明: How to access the correct `this` context inside a callback?