使用 Vue 没有从 Fuse.js 返回任何结果

Question

所以我对 Vue 还很陌生，我正在尝试使用 Fuse.js 进行客户列表搜索。 我确实得到了客户数组，并将其分配给 customer_search。我的密钥已正确填充，唯一的问题是结果不返回任何内容。我想知道我是否需要以不同的方式构建我的客户数组，或者我是否完全错过了其他东西？

任何帮助将不胜感激。

这是我的代码：

<template>  
<div>
    <div class="container">
        <h1>Search</h1>
        <input type="text" class="input-search" value="" v-model="query">
        <p v-html="results"></p>
        <p v-for="info in data" >{{info}}</p>
    </div>
</div>

</template>    

<script>
import Fuse from 'fuse.js'
import $ from 'jquery'
import PageService from '../../common/services/PageService'

const Search = {

    data(){
        return {
            data: {},
            fuse: {},
            results: {},
            query: '',
            options: {
                keys: [
                    'id',
                    'name',
                    'company',
                ],
                minMatchCharLength: 3,
                shouldSort: true,
                threshold: 0.5
            },
        }
    },
    methods:{
        runQuery(query){
            if(query.length >= 3)
                this.results = this.fuse.search(query)
        },
    },
    computed:{
        customers: function(){
            return this.data
        },
        customer_search: function(){
            return Object.values(this.data)
        },
    },
    watch: {
        query: function(){
            this.runQuery(this.query)

        }
    },
    created(){
        this.fuse = new Fuse(this.customer_search, this.options)
        if(this.$store.state.search != ''){
            this.query = this.$store.state.search
        }
        PageService.getSearchObject().then((response)=>{
            this.data = response.data
        }).catch((err)=>{
            console.log('Error')
        });
    },
}
export default Search
</script>

Answer 1

我认为您的 runQuery 方法是在创建 this.fuse 之前创建的，因此您的 runQuery 方法中的 this.fuse 不是最新的。

不妨试试：

methods:{
        runQuery(query){
            if(query.length >= 3)
                this.results = new Fuse(this.customer_search, this.options).search(query)
        },
    },