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 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
简单的网页广告特效实例
Aug 19 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 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 时间计算问题小结
2009/01/04 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
PHP数组相关函数汇总
2015/03/24 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP编写RESTful接口
2016/02/23 PHP
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Cpy和Python的效率对比
2015/03/20 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
大学毕业感言50字
2014/02/07 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
草房子读书笔记
2015/06/29 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书