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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
leaflet的开发入门教程
Nov 17 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 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
php基础知识:控制结构
2006/12/13 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
python中函数总结之装饰器闭包详解
2016/06/12 Python
python如何让类支持比较运算
2018/03/20 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python十进制转二进制的详解
2020/02/07 Python
PyQt5实现登录页面
2020/05/30 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
经理秘书找工作求职信
2013/12/19 职场文书
暑期实践思想汇报
2014/01/06 职场文书
个人自我剖析材料
2014/09/30 职场文书
学习十八大宣传标语
2014/10/09 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
男生贾里读书笔记
2015/06/30 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Redis三种集群模式详解
2021/10/05 Redis