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与其它库冲突的解决方法
Jun 25 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
JS解析XML实例分析
Jan 30 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
详解Vue方法与事件
Mar 09 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
angular2+node.js express打包部署的实战
Jul 27 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python中使用ElementTree解析XML示例
2015/06/02 Python
20个常用Python运维库和模块
2018/02/12 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python中if嵌套命令实例讲解
2021/02/25 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
Python中for后接else的语法使用
2021/05/18 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang