使用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)
        },
    },