view UI

iview select的v-model具有延迟性

2020-03-18  本文已影响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绑定之后的值了。否则你将得到上一次的值

上一篇下一篇

猜你喜欢

热点阅读