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绑定之后的值了。否则你将得到上一次的值