<template>
<div class="hello">
<el-input v-model="title" placeholder="请输入内容"></el-input>
<ul>
<li v-for="item in result">
标题: {{item.item.title}}
<br />
作者: {{item.item.author.firstName}}
<br />
分数: {{item.score}}
</li>
</ul>
</div>
</template>
<script>
import Fuse from "fuse.js";
export default {
data() {
return {
title: "",
fuse: null,
result: [],
books: [
{
title: "Java虚拟机",
author: {
firstName: "王浩",
lastName: "wanghao"
}
},
{
title: "人工智能",
author: {
firstName: "侯建军",
lastName: "marquis"
}
}
]
};
},
created() {
this.init();
},
watch: {
title(newName, oldName) {
console.log(newName);
console.log(oldName);
this.result = this.fuse.search(newName);
console.log(this.result);
}
},
methods: {
init() {
var options = {
shouldSort: true,
includeScore: true,
threshold: 0.6,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: ["title", "author.firstName"]
};
this.fuse = new Fuse(this.books, options);
}
}
};
</script>