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

Question

我正在过滤具有如下计算属性的项目:

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: Cannot read property 'toLowerCase' of undefined

Answer 1

可能只是您没有将项目数据正确传递到项目数组。

首先，vue-resource 现在使用 body 而不是数据来获取响应，因此您可能需要使用:

this.projects.push(rsp.body)

然后这将为您提供一个数组项，其中包含所有看起来不像您想要的项目。我相信你是在追求:

this.projects = rsp.body

假设响应主体是一个对象数组，这将允许:

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

按预期工作。意思是 project.title 现在应该是有效的

编辑

要将项目标题设置为小写，您必须返回一个带有标题参数的对象，即

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

然后您将通过以下方式在项目数组上设置:

this.projects.push(rsp.body)

所以首先要修复的是你的响应，对你的端点进行排序以便它返回你所期望的，然后上面的其余代码应该可以工作