Vue.js筛选器在本地工作，但不在服务器上工作
Vue.js筛选器在本地工作，但不在服务器上工作
提问于 2021-01-04 03:40:25
我是Vue的新手，我知道，我可能没有遵循如何构建代码的最佳实践。然而，这真的是又快又脏，我偶然发现了一个奇怪的情况。
一段过滤数组(类似于实时搜索)的代码可以在我的本地MAMP服务器上运行，但不能在基于NAS的but服务器上运行。
这是一段代码：
<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>唯一的区别是指向rest服务器的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)你知道原因吗？
回答 2
Stack Overflow用户
发布于 2021-01-04 04:19:09
当您在本地和从基于NAS的when服务器获取数据时，是否会获取相同的数据？
似乎在尝试使用toLowerCase函数时出现了问题。这可能是因为item.title或item.description返回null。
Stack Overflow用户
发布于 2021-01-04 04:44:53
我太傻了。我发现了错误:显然，我在服务器v版本上添加了一个额外的条目。这一行确实包含了一行描述中的null "value“--这就是导致问题的原因……现在我知道，我也需要迎合这一点...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65554146
复制相关文章
相似问题
腾讯云开发者
