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中的referrer返回上一页使用介绍
Sep 26 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
学习Vue组件实例
Apr 28 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
pandas参数设置的实用小技巧
2020/08/23 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
公司JAVA开发面试题
2015/04/02 面试题
文明学生事迹材料
2014/01/29 职场文书
公司捐款倡议书
2014/05/14 职场文书
运动员获奖感言
2014/08/15 职场文书
律师授权委托书范本
2014/10/07 职场文书
小学一年级学生评语大全
2014/12/25 职场文书