Vue-input框checkbox强制刷新问题


Posted in Javascript onApril 18, 2019

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

Vue-input框checkbox强制刷新问题

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

Vue-input框checkbox强制刷新问题

ps:vue中关于checkbox的问题

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

<template>
  <div class='mycheck' @click='check()'>
    <input type="checkbox" v-model="value" value="短信" id='message'>
    <label for="message" class='msg' ></label>
    <label >短信</label> 
    <input type="checkbox" v-model="value" value="QQ" >
    <label >QQ</label> 
    <input type="checkbox" v-model="value" value="微信" >
    <label >微信</label> 
    <input type="checkbox" v-model="value" value="微博">
    <label >微博</label> 
    <p>{{value}}</p> 
  </div>
</template>
<script>
export default {
  data(){
    return {
      value:[]
    }
  },
  methods:{
    check(){
      console.log(this.value)
    }
  }
</script>

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

Vue-input框checkbox强制刷新问题

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

Vue-input框checkbox强制刷新问题

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

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

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

Vue-input框checkbox强制刷新问题

总结,好了,本文就给大家介绍到这里,希望大家喜欢!

Javascript 相关文章推荐
图片完美缩放
Sep 07 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
React实现轮播效果
Aug 25 Javascript
vue axios封装及API统一管理的方法
Apr 18 #Javascript
Vue组件系列开发之模态框
Apr 18 #Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 #Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 #Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 #Javascript
vue.js高德地图实现热点图代码实例
Apr 18 #Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 #Javascript
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php的正则处理函数总结分析
2008/06/20 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python输出pdf文档的实例
2020/02/13 Python
详解Python 循环嵌套
2020/07/09 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
若干个Java基础面试题
2015/05/19 面试题
写求职信有哪些注意事项
2014/05/08 职场文书
园林系毕业生求职信
2014/06/23 职场文书
爱护公共设施的标语
2014/06/24 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书