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

问题描述

我对 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://stackoverflow.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)

任何想法的原因？

标签： vue.jsfilter

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

问题描述

解决方案

推荐阅读