Question

VueJS InertiaJS 未捕获（承诺中）TypeError：无法读取未定义的属性“搜索”

2021-07-31

2469

javascript laravel vue.js inertiajs

我正在使用 Inertia 在 Vue JS 上实现一个列表，您可以按名称进行过滤

data() {
        return {
            selectedUser: this.value,
            selected: null,
            search: '',
        }
    },

computed: {
        userlist: function(){
            return this.users.filter(function(user){
                return user.name.toLowerCase().match(this.search.toLowerCase())
            });
        }
    },

和组件

<input class="form-input" placeholder="Search.." v-model="search">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-900 flex items-center" v-for="user in userlist" :key="user.id" @click.prevent="select(user)">

但是，当我打开组件所在的模式时，出现错误

Uncaught (in promise) TypeError: Cannot read property 'search' of undefined

我已经对搜索值进行了硬编码，如下所示

computed: {
        userlist: function(){
            return this.users.filter(function(user){
                return user.name.toLowerCase().match('John')
            });
        }
    },

并且组件渲染得很好。我不知道错误可能出在哪里，所以任何帮助都将不胜感激

Answer 1

问题可能是您正在使用 此 关键字期望它是 参考组件实例 ，但是您正在使用它 函数 声明，它创建一个新的上下文，导致 this 为 Undefined 。

764920051 < /code>
 
  为了防止这种情况，您可以使用箭头功能，该功能将保留现有上下文。这意味着
  此
  关键字仍将引用您的组件实例。
 
 687060552

Answer 2

您可以尝试以下方法：

computed: {
    userlist: function(){
        const vm = this;
        return this.users.filter(function(user){
            return user.name.toLowerCase().match(vm.search.toLowerCase())
        });
    }
},