解决VUE双向绑定失效的问题

双向绑定失效的原因有很多。

lz就说最近遇到的。

是的，单价下的那个输入框我用了双向绑定（比如叫price，比如100）。然后ipnut

键入中文时，（即使我做了输入验证）。回车时虽然框中不会保留中文，但事实上VUE的双向绑定已经失效了。不管你后面输入什么，绑定的price保存的值只会是中文前的那个值（100）。

这样就导致 表面好像没事，但是当你提交时就数据不对了。

还有一种是、

是日期控件（bootstrap的）的问题，部分控件才会。mmp哦，当lz用这个空间选定日期时。以为美滋滋的一次搞定！

当提交的时候 u才发现 双向绑定的变量，压根就是空值。。。。

空值。。。后来才知道，双向绑定 监听的是键入操作。而利用这个日期控件的 “ 键入”，根本就不认识，谢谢，没监听到。

所以没办法，只能手动帮它 “变相绑定”。（进行某操作的时候，获取input的值，给绑定的变量赋值）。

。。。很low单很粗暴。

以上这篇解决VUE双向绑定失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位: 代码: 效果图: 是不是看起来跟vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue.由于本文只是为了学习和分享,所以只是简单实现下原理,并没有考虑太多情况和设计,如果大家有什么建议,欢迎提出来. 本文主要介绍两大内容: 1. vue数据双向绑定的原

  • Vue 3.0双向绑定原理的实现方法

    proxy方法 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过new Proxy()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理,其他代码不变.可查看Vue 2.0双向绑定原理的实现 具体实现过程的代码如下: 1.定义构造函数 function Vue(option){ this.$el = document.q

  • 自定义Vue中的v-module双向绑定的实现

    v-module 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件,父组件监听 input 事件中传递的 value 值,并存储在父组件 data 中:然后父组件再通过 prop 的形式传递给子组件 value 值,再子组件中绑定 input 的 value 属性即可. 我们着手实现一遍: 子组件传值 首先子组件需要一个 input 标签,这个 input 标签需要绑定 input 事件,$emit 触发父组件的 input 事件,通过这种方法子组件传递值给父组件 <in

  • Vue 2.0双向绑定原理的实现方法

    Object.defineProperty方法 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. 具体实现过程的代码如下: 1.定义构造函数 function Vue(option){ this.$el = document.querySelector(option.el); //获取挂载节点 this.$data = option.data;

  • 详解基于Vue的支持数据双向绑定的select组件

    今天用Vue做一个小项目时需要用到多个select筛选功能,但是原生的太丑,如果直接写在当前页多个select处理起来又太繁琐,第三方ui又太大,所以就自己写了一个,并上传了GitHub仓库,仓库地址:https://github.com/tuohuang/vue-select 使用方法: 引入组件: import VueSelect from '../components/VueSelect' 注册组件 export default { components: { VueSelect } }

  • 详解vue中的父子传值双向绑定及数据更新问题

    详解vue中的父子传值双向绑定及数据更新问题

    在进行父子组件传值时,用到子组件直接控制父组件中的变量值以及在vue中直接更改对象或者数组的值,视图未发生变化的解决办法,当时完成项目时,一直未找到原因,修改了好久. 1.父子组件传值双向绑定 在传递给子组件中的变量上使用.sync修饰符,就能够实现父子传值的双向绑定 <!-- 父组件 --> <template> <div class="audioCate"> <child :show.sync="showModel" @

  • 解决VUE双向绑定失效的问题

    双向绑定失效的原因有很多. lz就说最近遇到的. 是的,单价下的那个输入框我用了双向绑定(比如叫price,比如100).然后ipnut 键入中文时,(即使我做了输入验证).回车时虽然框中不会保留中文,但事实上VUE的双向绑定已经失效了.不管你后面输入什么,绑定的price保存的值只会是中文前的那个值(100). 这样就导致 表面好像没事,但是当你提交时就数据不对了. 还有一种是. 是日期控件(bootstrap的)的问题,部分控件才会.mmp哦,当lz用这个空间选定日期时.以为美滋滋的一次搞定

  • vue 双向绑定问题$emit无效的解决

    vue 双向绑定问题$emit无效的解决

    目录 vue 双向绑定问题$emit无效 父组件 子组件 vue双向绑定指令 功能 效果展示 vue 双向绑定问题$emit无效 父组件变量传给子组件,子组件$emit 触发父组件的方法修改父组件的变量,但是父组件的值变了,子组件的值没有改变 父组件 <div>     // 子组件     <son :status.sync="status"/> </div> <script> export default {     data(){

  • 关于vue双向绑定带来的问题及解决

    关于vue双向绑定带来的问题及解决

    目录 vue双向绑定带来的问题 问题场景 解决方案 vue双向绑定的原理总结 MVVM vue当中的双向绑定 vue双向绑定带来的问题 问题场景 查询完表格数据后 通过作用域插槽,将该行数据传到修改页面(定义了个新对象存储数据),但是由于数据双向绑定,修改这个新对象的值,会影响到最初查询表格获取的值 如下 this.editForm = row 解决方案 方法1:通过json之间的解析,深拷贝创建一个与row无绑定关联的临时对象,再赋值给editForm this.editForm = JSON

  • vue双向绑定的简单实现

    vue双向绑定的简单实现

    研究了一下vue双向绑定的原理,所以简单记录一下,以下例子只是简单实现,还请大家不要吐槽~ 之前也了解过vue是通过数据劫持+订阅发布模式来实现MVVM的双向绑定的,但一直没仔细研究,这次深入学习了一下,借此机会分享给大家. 首先先将流程图给大家看一下 参考文章:Vue.js双向绑定的实现原理 我虽然参考的是这篇文章,下面的代码也是在阅读几遍后仿造的,自己只是简单添加了个递归实现所有dom子节点的双向绑定,以及添加了一些理解,但真正让我了然于心,让我可以独立写出2遍完整逻辑的其实是这张图,所以个

  • vue双向绑定及观察者模式详解

    vue双向绑定及观察者模式详解

    在Vue中,使用了Object.defineProterty()这个函数来实现双向绑定,这也就是为什么Vue不兼容IE8 1 响应式原理 让我们先从相应式原理开始.我们可以通过Object.defineProterty()来自定义Object的getter和setter 从而达到我们的目的. 代码如下 function observe(value, cb) { Object.keys(value).forEach((key) => defineReactive(value, key, value

  • 解决vue热替换失效的根本原因

    新手刚开始使用vue时,常会遇见一个坑,那就是热替换失效. 什么?你跟我说使用官方的vue-cli去构建,我就是使用vue-cli后突然失效. 什么?你跟我说重新npm run dev一下,好嘛,已经run了N次了依然没回到大路上. 经过在网上一番查找,发现基本没有这个问题的详解,可能是这个问题太低级了? 讲解一下热替换的原理:热替换是在执行npm run dev后,会启动一个本地服务器(webpack-dev-server),这个服务器会观察源代码编译出来的文件.一旦修改了源代码,就会立刻编译

  • vue双向绑定数据限制长度的方法

    vue双向绑定数据如何限制长度?具体方法请阅读文章 问题描述 vue中输入框v-modle 双向绑定的数据:在需要的业务场景下需要对其进行字数长度限制: 解决方案 可以使用以下方法: 方法一: //方法一:输入框添加keypress方法:然后函数为: maxLength(attr,length){ let keyCode = event.keyCode; console.log("keyCode"); let len=0; console.log(this[attr].length);

  • 解决angular双向绑定无效果,ng-model不能正常显示的问题

    今天遇到了个问题,js代码中变量已经变化了,但是html页面中没有正常的显示出来. 代码如下: <input type="text" ng-model="paramValue" auto-focus> $scope.paramValue = param; 以上代码就会造成有时input框中无内容的情况,打断点显示$scope.paramValue是有值的,但是页面就是啥都显示不出来. 换成下边代码就没问题了: <input type="t

  • Vue双向绑定实现原理与方法详解

    本文实例讲述了Vue双向绑定实现原理与方法.分享给大家供大家参考,具体如下: 昨天接到一个电话面试,上来第一个问题就是Vue双向绑定的原理.当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种. 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入

  • 解决Vue router-link绑定事件不生效的问题

    解决方法:加native <router-link to="/date" @click.native="nav_click">最新</router-link> methods: { nav_click: function() { console.log(1) } } 解释: 1: 因为它是自定义标签,根本就没有事件和方法,所以不触发,加个native 就是告诉vue 这个标签现在有主了 它是H5标签 可以加事件了. 2:父组件要想在子组件监听

随机推荐