在项目时用到了一些插件,比如这次用了下拉菜单插件。
这个插件需要实例化,而下拉框的数据是通过ajax来获取的,然后在用 v-for 渲染数据,再次遇到了一个问题。
就是等插件实例化完毕,数据却还没渲染完毕,所以这就出现一个bug。出现bug解决掉。
第一种解决方法: settimeout
setTimeout(function() { //实例初始化 },100)
但是这种方法有一个缺点,就是不确定 数据 什么时候渲染完毕。
第一种情况: 假设10毫秒渲染完毕,但是setTimeout需要等100毫秒,浪费了90毫秒。
第二种情况:假设数据需要 200 毫秒执行完毕,但是 100毫秒就执行了 实例初始化,BUG又出现了。
总而言之这种方法不是我们想要的,看第二种方法。
第二种解决方法: watch + vm.nextTick
这两种方法是 vue 的属性和方法。
watch: 监听某一个data数据发生变化就执行方法。
例:
vm = new Vue({ el:'.app', data: { a: '1', }, watch: { a: function() { console.log('a的数据发生变化'+this.a); } } }) vm.a = '2';
data 里面的a属性发生了变化变成成了2,就触发了watch的a方法。console.log(a的数据发生变化2);
nextTich: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div @click="ceshi()">{{ a }}</div> </body> <script type="text/javascript"> vm = new Vue({ el:'.app', data: { a: '1', }, methods:{ ceshi(){ a = 2; /*DOM还没更新*/ this.$nextTick(function(){ /*DOM更新了*/ }) } } }) </script> </html>
$nextTick 里面DOM更新是指页面上的数据是最新的数据。而不是data的a数据更新了。
知道这两种属性之后。我们开始解决一下BUG吧。
先贴完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <setion> <option value="1" v-for="(item,key) in arr" :key="key">{{ item }}</option> </setion> </body> <script type="text/javascript"> vm = new Vue({ el:'.app', data: { arr: [], }, wathc:{ arr: function() { this.$nextTick(function(){ /*现在数据已经渲染完毕*/ }) } }, mounted:function() { var that = this; axios.get('url',{ params:{ link: '', } }).then(function(res){ that.arr = res; }) } }) </script> </html>
好,这就是我们解决的完整代码。 解释一下什么意思。
相关推荐
本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第...单选按钮取消选中的三种方式</title> [removed] [removed] [removed] $(function(){ // v
今天小编就为大家分享一篇layui清除radio的选中状态实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
今天小编就为大家分享一篇layui 实现自动选择radio单选框(checked)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
今天小编就为大家分享一篇浅谈监听单选框radio改变事件(和layui中单选按钮改变事件),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox
//点击选中(单选) //单击行勾选checkbox事件 $[removed]("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('....
Layui的eleTree树式选择器,分单选和多选,带搜索功能。
layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作。 实现效果: HTML代码: <body> <div class=layui-fluid> <input type=text id=txt_id /> <table class=...
今天小编就为大家分享一篇layui之table checkbox初始化时选中对应选项的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
今天小编就为大家分享一篇layui复选框的全选与取消实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
jQuery基于layui插件制作checkbox复选框选中代码,权限范围多选、单选、全选代码;checkbox父级子级结构,父级选中,子级全选,子级没有选中父级取消选中效果。
最近在使用layui前端框架,在使用单选按钮、下拉菜单select、checkbox等控件的时候 往往遇到一些初始化的东西。 有时候会发现,自己动态append进去的代码要不就是没有显示,要不就是初始化默认选中出问题。 以上这些...
今天小编就为大家分享一篇layui的table单击行勾选checkbox功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
本demo的效果是单选框一有a和b两个选项按钮,单选框二有q和w两个选项按钮, 选中a,使得q不可选,w选中;选中b,使得w不可选,q选中 下面是完整的代码,需要引入layui.js,layui.css <!DOCTYPE html> <...
layui对表单元素都作了美化,...* 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美化,所以我们需要做的事找到目标单选框的临近i标签,然后触发它的click事件 * 下拉框,layui
今天小编就为大家分享一篇解决layui的使用以及针对select、radio等表单组件不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
主要介绍了JQuery判断radio(单选框)是否选中和获取选中值方法总结,本文讲解了利用获取选中值判断选中、使用checked属性判断选中、jquery获取radio单选按钮的值、获取一组radio被选中项的值、设置单选按钮被选中等...