美文网首页view UI
iview select的v-model具有延迟性

iview select的v-model具有延迟性

作者: 万物皆是零一 | 来源:发表于2020-03-18 11:23 被阅读0次
    我发现我的select,每次触发获取的值都是上一次的值

    组件代码

    <input type="hidden" id="statCycle" v-model="detailSelectModel" />
          <i-Select v-model="detailSelectModel" style="width:120px" @on-change="changeStatCycle()">
                   <i-Option v-for="item in detailOptSelect" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
          </i-Select>
    

    组件注册代码

    new Vue({
        el:"#detailPartSelect",
        data:function() {
            return {
                detailSelectModel:'3',
                detailOptSelect:[{
                            value: '1',
                            label: '最近一天'
                        }
                        ,{
                            value: '2',
                            label: '最近一周'
                        }
                        ,{
                            value: '3',
                            label: '最近一个月'
                        }]
            }
        }
    })
    

    其实就是做一个下拉框,onchange的时候到后台去取echarts的data。
    由于本人不是专业前端,所以是采用非render的方式使用iview的组件的。
    并且不太明白如何获取select选中的值,于是直接用一个hidden的input来储存这个值,这样我只需要按照id获取这个input的值就可以了。

    问题是,我的function,每次触发都是上一次选的值

    所以我总觉得不对劲,但是搜了一下,好像别人并没有这个问题。最后我做了个测试,真正的逻辑放在另外一个function里面,然后onchange触发的function其实是很定时器,我设置了0.2秒后运行我真正的funciton,结果发现这次可以了,所以得出结论,这个v-model双向绑定的值是有延后性的。

    function changeStatCycle(){
        setTimeout(() => {
            trueChangeStatCycle();
        }, 200);
    }
    function trueChangeStatCycle() {
        var nodeId = $('#currentNodeId').val();
        loadDevInfoList(nodeId);
    }
    
    select选中的值如果用v-model双向绑定的话,onchange函数是会优先于v-model的值更新。

    所以如果需要获取v-model双向绑定的值的话,onchange函数里面设置一个简单的定时器吧,我暂时用的是0.2秒,然后就可以获取v-model绑定之后的值了。否则你将得到上一次的值

    相关文章

      网友评论

        本文标题:iview select的v-model具有延迟性

        本文链接:https://www.haomeiwen.com/subject/jmcqyhtx.html