Vue-input框checkbox强制刷新的示例分析-创新互联

小编给大家分享一下Vue-input框checkbox强制刷新的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站服务项目包括元氏网站建设、元氏网站制作、元氏网页制作以及元氏网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,元氏网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到元氏省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

  在引用input框的checkbox属性时,选中后会出现数据已经刷新,checkbox选中状态不会改变。这时在事件触发后可以调用this.$forceUpdate(),强制刷新页面解决这个问题。

Vue-input框checkbox强制刷新的示例分析

 input框可以加入readonly="readonly"禁止更改

Vue-input框checkbox强制刷新的示例分析

ps:vue中关于checkbox的问题

在vue中写checkbox时,发现出现问题:当点击一个选项时,输出的数组为空,当取消或者点击下一个选项时,才会出现该选项值且下一个选项值不会出现:


当点击微博 选项,控制台输出为一个空数组:

Vue-input框checkbox强制刷新的示例分析

当再点击微信 控制台输出微博

Vue-input框checkbox强制刷新的示例分析

这个问题形成的原因是当点击checkbox时,先触发click事件,打印数据,然后,才把checbox的value值传给model,也就是传入value中。

在我网上搜索解决的办法中,发现使用setTimeout有奇效。用伪异步的方式去执行这段代码。(搜索的方法中有复杂的等有时间再仔细看,笔记后面附上地址。)

check(){
  setTimeout(() => console.log(this.value))
}

Vue-input框checkbox强制刷新的示例分析

以上是“Vue-input框checkbox强制刷新的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


新闻标题:Vue-input框checkbox强制刷新的示例分析-创新互联
文章位置:http://azwzsj.com/article/dcigho.html