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与css打造个性化的单选框和复选框
Oct 20 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
package.json配置文件构成详解
Aug 27 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
JPA面试常见问题
2016/11/14 面试题
Android笔试题总结
2014/11/29 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
高二美术教学反思
2014/01/14 职场文书
小小商店教学反思
2014/04/27 职场文书
体育教师求职信
2014/05/24 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2014年政工师工作总结
2014/12/18 职场文书
介绍信范文大全
2015/05/07 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python