Question

VueJS 搜索过滤器错误：无法准备好未定义的“搜索”

2019-09-10

354

json vue.js search filter axios

我正在构建一个应用程序来使用 json 并将其与搜索过滤器输入和其他内容一起列出。

我已经尝试创建该函数，但没有成功。

Codesandbox URL https://codesandbox.io/s/vue-template-7iev3?fontsize=14

    search: "",

显示“TypeError：无法读取未定义的属性‘search’”但它已定义

Answer 1

TypeError: 无法读取未定义的属性“search”并不意味着“search”未定义，而是父对象未定义。在您的例子中，“this.search”，这在您的回调中未定义。您应该使用“self.search”，因为您已经定义了它，或者只需将您的语法更改为：

computed: {
    produtoFiltrado: function() {
      return this.produtos.filter((cust) => {
        return cust.nome.match(this.search);
      });
    }
  }

箭头函数不会将其“this”绑定到其上下文，因此您可以使用它访问您的 vue 方法、props、数据等，没有任何问题

Answer 2

为避免出现 “TypeError：无法读取 null 的属性‘includes’” 问题，最好在返回前添加一行

computed: {
filteredItems() {
  return this.customers.filter(item => {
     return (item.title || '').toLowerCase().indexOf((this.search || '').toLowerCase()) > -1
  })
}}

(this.search || '') 即可解决问题..