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 相关文章推荐
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
JavaScript类的写法
Sep 17 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
php对称加密算法示例
2014/05/07 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python底层封装实现方法详解
2020/01/22 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
python开发入门——set的使用
2020/09/03 Python
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
校本研修个人总结
2015/02/28 职场文书
信用卡收入证明范本
2015/06/12 职场文书
员工聘用合同范本
2015/09/21 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server