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

Posted 2023-02-22

【中文标题】VueJS 搜索过滤器错误：无法准备好未定义的“搜索”

【英文标题】：VueJS search filter error: cannot ready 'search' of undefined

【发布时间】：2020-01-12 07:52:45

【问题描述】：

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

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

代码沙盒网址 https://codesandbox.io/s/vue-template-7iev3?fontsize=14

    search: "",

它显示“TypeError: Cannot read property 'search' of undefined”但它已定义

【参考方案1】：

TypeError: Cannot read property 'search' of undefined" 并不意味着“search”是未定义的，但父对象是。在你的情况下，“this.search”，这在你的回调中是未定义的。你应该使用“self.search”，因为您已经定义了它，或者只是将您的语法更改为：

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

箭头函数不会将其“this”绑定到其上下文，因此您可以使用 this 毫无问题地访问您的 vue 方法、道具、数据等

【讨论】：

卡斯特里尼，谢谢。现在我有另一个问题......项目没有显示。如果我将条件 v-for="produtos in produtoFiltrado" 更改为 v-for"produtos in gc.produtos" 它可以工作，但不会按我的意愿过滤

在你的计算属性中用 this.gc.produtos 改变 this.produtos，你在迭代错误的数组

Castellini，现在我有“TypeError: this.gc.produtos is undefined”

在您获得 ajax 响应之前，它是未定义的。您可以将数据中的 gc 默认为 produtos: [] 因为我猜您总是需要一个 produtos 列表，或者只是在迭代之前检查您的计算中是否定义了 produtos，否则返回一个空数组

您能否说得更具体一些，因为我是 Vue 的新手。如果您能帮我编写代码，我将不胜感激，Davide

【参考方案2】：

为了避免"TypeError: Cannot read property 'includes' of null"的问题，最好在返回前添加一行

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

(this.search || '') 会成功的..