使用 vue-multiselect 和 debounce 时无法从 vue.js 组件内部调用另一种方法

Question

我正在尝试使用 vue-multiselect 实现自动完成，它具有异步服务器调用，但我使用了 debounce 函数来延迟服务器中的调用，但我遇到了问题。问题是我无法从使用 debounce 的方法中调用另一个方法。我的代码如下：

 <script>
import Multiselect from 'vue-multiselect';
import _ from 'lodash';
export default {
    name: "required-information",
    components:{
        Multiselect
    },
    data(){
        return {
            tripType:1,
            depart_date:null,
            return_date:null,
            selectedAirport:null,
            depart_from_airports:[],
            selectedToAirport:null,
            depart_to_airports:[],
            adults:null,
            children_no:null,
            flight_class:null,
            infants:null,
            airlines:[],
            selectedAirline:[],
        }
    },
    methods:{

        formatAirport:()=>{
            console.log("q");
            // let new_airports=[];
            // for(let i=0;i<airports.length;i++){
            //     let city=airports[i].airport+' ('+airports[i].code+')';
            //     let push_data={
            //         name:city,
            //         code:response[i].code
            //     }
            //     new_airports.push(push_data)
            // }
            // return new_airports;
        },
        asyncFind: _.debounce(query => {

            if(!query)
                return;



           axios.get("/airport-list?query="+query).then((response)=>{
               this.formatAirport();

           }).catch((error)=>{
               console.log(error);
           })
        }, 1000),

    }
}

它没有记录 q，而是将错误显示为：

TypeError: _this.formatAirport is not a function
at app.js:66754
at <anonymous>

我已从以下代码行调用了 asyncFind

                     <multiselect v-model="selectedAirport" id="depart_form"  track-by="name" label="name" placeholder="Select one" :options="depart_from_airports" :searchable="true" @search-change="asyncFind" />

Answer 1

不要使用箭头 (=>) 函数，您将无法访问任何其他外部属性的数据属性。使用如下所示的常规函数方式：

asyncFind: _.debounce(function(query) {
            if(!query)
                return;
           axios.get("/airport-list?query="+query).then((response)=>{
               this.formatAirport();
           }).catch((error)=>{
               console.log(error);
           })
        }, 1000),

希望对您有所帮助。

使用 vue-multiselect 和 debounce 时无法从 vue.js 组件内部调用另一种方法

Another method cannot be called frominside vue.js component while using vue-multiselect and debounce

vuejs2

debounce