在谷歌浏览器下vue的@input事件问题

标签：arch   off   start   pos   结束   self   css   hone   code   

在谷歌浏览器下vue的@input事件问题：input输入中文，在输入拼音的时候就在触发（360不这样）

原文链接：https://blog.csdn.net/m0_37817986/article/details/103079249

<input v-on:input="searchOne($event,item.ind)" v-on:compositionstart="flagg=false" v-on:compositionend="flagg=true" autocomplete="off"/>

var app = new Vue({
    el: ‘#app‘,
    data: {
        flagg:false
    },

　　methods: {
    searchOne:function(event,ind){
        //console.log(this.flagg);
        var _this = this;
        // setTimeout(function(){
        if(this.flagg){
            _this.kemuSearch(ind);
        }
        //因为选词结束的时候input会比compositionend先一步触发，此时flag还未调整为true，所以不能触发到console，故用setTimeout将其优先级滞后。
        // },0)

        //这个事件是input在360和谷歌两个效果不一样，用change只能在失去焦点的时候触发
    },

kemuSearch: function (num) {
    var self = this;
    this.flag = 0;
    var _IsLastLevel = 1;
    //这里是表单每次变化的值，可能只能为空时才能去请求
    //这里应该是键盘实时搜索，鼠标也用到这个方法
    var _SearchKey = $("#text" + num).val();
    $.ajax({
        type: ‘POST‘,
        url: "/IncreaseCredit/Subject_GetList",
        data: {
            IsLastLevel: _IsLastLevel,
            SearchKey: _SearchKey
        },
        dataType: "json",
        async:false,//这里要改成同步的，否则没有查询完就去干别的了
        success: function (msg) {
            if (msg.status.code == "1") {
                app.list = [];
                //list提供一个临时容器，存请求回来的列表值
                for (var i = 0; i < msg.row_data.record.length; i++) {
                    app.list.push(msg.row_data.record[i]);
                }
                if(self.list.length>0){
                    self.flag = 1;//当有值的时候改为1，让下拉框显示
                }else{
                    //实时查询，当没有值的时候不要显示空框
                    $(‘.out‘).css({ ‘display‘: ‘none‘})
                }
                // for (var i in msg.row_data.record) {
                //     app.list.push(msg.row_data.record[i]);
                // }
                //console.log(app.list)
            }
        },
    });

},

}

在谷歌浏览器下vue的@input事件问题

标签：arch   off   start   pos   结束   self   css   hone   code   

原文地址：https://www.cnblogs.com/liufeiran/p/12703647.html