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变量作用域及可访问性的探讨
Nov 23 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
webpack实用小功能介绍
Jan 02 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP实现简单日历类编写
2020/08/28 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python中pygame安装方法图文详解
2015/11/11 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
详解python itertools功能
2020/02/07 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
商务英语求职自荐信范文
2013/12/24 职场文书
文明风采获奖感言
2014/02/18 职场文书
行政文员岗位职责
2015/02/04 职场文书
党支部季度考核意见
2015/06/02 职场文书
国博复兴之路观后感
2015/06/02 职场文书
婚育证明样本
2015/06/16 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android