Vue.js 过滤器在本地工作，但不在服务器上

Posted 2023-02-23

【中文标题】Vue.js 过滤器在本地工作，但不在服务器上

【英文标题】：Vue.js Filter working locally, but not on server

【发布时间】：2021-04-09 17:49:12

【问题描述】：

我对 Vue 还很陌生，而且我知道，我可能没有遵循如何构建代码的最佳实践。然而，这真的只是又快又脏，我偶然发现了一个奇怪的情况。

过滤数组的一段代码（一种实时搜索）在我的本地 MAMP 服务器上运行，但在基于 NAS 的网络服务器上运行。

这是一段代码：

<script>
    const app = new Vue(
        el: '#recipe-app-start',
        data: 
            searchQuery: null,
            recipes: [],
        ,
        filters: 
            recipeUrl(id) 
                return 'recipe.php?id=' + id;
            ,
        ,
        mounted() 
            fetch(globalConfig.restServer + 'recipes')
                .then(response => response.json())
                .then((data) => 
                    this.recipes = data;
                    console.log(this.recipes);
                )
        ,
        computed: 
            // Source: https://***.com/questions/52558770/vuejs-search-filter
            resultQuery() 
                if (this.searchQuery) 
                    return this.recipes.filter((item) => 
                        return this.searchQuery.toLowerCase().split(' ').every(v => (item.title.toLowerCase().includes(v) || item.description.toLowerCase().includes(v)))
                    )
                 else 
                    return this.recipes;
                
            
        ,
    )

</script>

唯一的区别是其余服务器的 URL（也更改为同一服务器）。 该数组最初会填充，但是当我尝试在相应的搜索字段中输入时，它会在本地工作并过滤掉不相关的条目，而在服务器上它只是在控制台中引发错误：

(found in <Root>)
warn @ vue:634
logError @ vue:1893
globalHandleError @ vue:1888
handleError @ vue:1848
Vue._render @ vue:3553
updateComponent @ vue:4067
get @ vue:4478
run @ vue:4553
flushSchedulerQueue @ vue:4311
(anonymous) @ vue:1989
flushCallbacks @ vue:1915
Promise.then (async)
timerFunc @ vue:1942
nextTick @ vue:1999
queueWatcher @ vue:4403
update @ vue:4543
notify @ vue:745
reactiveSetter @ vue:1070
proxySetter @ vue:4630
input @ VM237:3
invokeWithErrorHandling @ vue:1863
invoker @ vue:2188
original._wrapper @ vue:7547
vue:1897 TypeError: Cannot read property 'toLowerCase' of null
    at (index):114
    at Array.every (<anonymous>)
    at (index):114
    at Array.filter (<anonymous>)
    at Vue.resultQuery ((index):113)
    at Watcher.get (vue:4478)
    at Watcher.evaluate (vue:4583)
    at Proxy.computedGetter (vue:4832)
    at Proxy.eval (eval at createFunction (vue:11649), <anonymous>:3:561)
    at Vue._render (vue:3551)
logError @ vue:1897
globalHandleError @ vue:1888
handleError @ vue:1848
Vue._render @ vue:3553
updateComponent @ vue:4067
get @ vue:4478
run @ vue:4553
flushSchedulerQueue @ vue:4311
(anonymous) @ vue:1989
flushCallbacks @ vue:1915
Promise.then (async)
timerFunc @ vue:1942
nextTick @ vue:1999
queueWatcher @ vue:4403
update @ vue:4543
notify @ vue:745
reactiveSetter @ vue:1070
proxySetter @ vue:4630
input @ VM237:3
invokeWithErrorHandling @ vue:1863
invoker @ vue:2188
original._wrapper @ vue:7547
vue:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of null"

(found in <Root>)
warn @ vue:634
logError @ vue:1893
globalHandleError @ vue:1888
handleError @ vue:1848
Vue._render @ vue:3553
updateComponent @ vue:4067
get @ vue:4478
run @ vue:4553
flushSchedulerQueue @ vue:4311
(anonymous) @ vue:1989
flushCallbacks @ vue:1915
Promise.then (async)
timerFunc @ vue:1942
nextTick @ vue:1999
queueWatcher @ vue:4403
update @ vue:4543
notify @ vue:745
reactiveSetter @ vue:1070
proxySetter @ vue:4630
input @ VM237:3
invokeWithErrorHandling @ vue:1863
invoker @ vue:2188
original._wrapper @ vue:7547
vue:1897 TypeError: Cannot read property 'toLowerCase' of null
    at (index):114
    at Array.every (<anonymous>)
    at (index):114
    at Array.filter (<anonymous>)
    at Vue.resultQuery ((index):113)
    at Watcher.get (vue:4478)
    at Watcher.evaluate (vue:4583)
    at Proxy.computedGetter (vue:4832)
    at Proxy.eval (eval at createFunction (vue:11649), <anonymous>:3:561)
    at Vue._render (vue:3551)

有什么原因吗？

【参考方案1】：

我太傻了。我发现了错误：显然我在服务器 v 版本上添加了一个附加条目。并且那个确实包含一行在描述中具有空“值”的行 - 这导致了问题......现在我知道，我也需要满足这个问题......

【参考方案2】：

您在本地和从基于 NAS 的网络服务器获取相同的数据吗？

似乎在尝试使用 toLowerCase 函数时出现问题。这可能是因为 item.title 或 item.description 返回 null。

【讨论】：

是的，REST 服务器和数据库都是 1:1 复制的。

我太笨了。我发现了错误：显然我在服务器 v 版本上添加了一个附加条目。并且那个确实包含一行在描述中具有空“值”的行 - 这导致了问题......现在我知道，我也需要满足这一点......

嗯，这就是我们获得经验的方式！啊