我试图集成fuse.js
到我的Nuxt.js
应用程序中,但无法运行。搜索引擎基本上正在使用当前设置,但在加载页面时出现初始错误:
Cannot read property 'title' of undefined
每个keyUp
.
数组一开始也是results
空的,但我想从一开始就显示所有可能的条目。你知道如何解决这个问题吗?
<template>
<div :class="'panel'" ref="panel">
<input
class="search"
type="text"
v-model="searchTerm"
@keyup="filterResults()"
/>
<ul v-if="results" class="section">
<li v-for="result in results">
{{ result.item.title }}
</li>
</ul>
</div>
</template>
<script>
import Fuse from "fuse.js";
export default {
mounted() {
this.fuse = new Fuse(this.list, this.options);
this.results = this.list;
},
methods: {
filterResults() {
if (this.searchTerm.trim() === "") this.results = this.list;
else this.results = this.fuse.search(this.searchTerm.trim());
},
},
data() {
return {
fuse: null,
searchTerm: "",
results: [],
options: {
shouldSort: true,
maxPatternLength: 32,
keys: ["title", "author.firstName"],
},
list: [
{
title: "Old Man's War",
author: {
firstName: "John",
lastName: "Scalzi",
},
},
{
title: "The Lock Artist",
author: {
firstName: "Steve",
lastName: "Hamilton",
},
},
{
title: "HTML5",
author: {
firstName: "Remy",
lastName: "Sharp",
},
},
],
};
},
};
</script>