事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象

        userInfo : {
'nickName' : '', // 昵称
'password' :'', // 是否有密码
'gender' : '', // 性别
'avatar' : '', // 头像
'userAccount' : '', // 账号
'birthday' : '', // 出生日期
'cityName' : '', // 城市
'email' : '', // 邮箱
'mobile' : '', // 手机号
'userId' : '' // 用户id
}

然后在组件中也定义了一个一毛一样的对象完全一样,这样做是为了方便去store中用getter取值

this.userInfo = this.ache_getUserInfo;

现在我在这个组件中使用v-model绑定了 userInfo.nickName这个值,神奇的事情发生了,我input框输入值的时候,store里面的值也会随改变!

但是如果我的这个组件中的参数名和store中的不一样,就不会发生这种情况,比如我把nickName改为comNickName,然后在组件中绑定userInfo.comNickName就不会,也就是说组件中v-model绑定的值和vuex的store中的名字一样,那么他会影响store中的值。

=_=!!汗

在vue1.0遇到vuex和v-model的坑的更多相关文章

  1. tensorflow 2.0 技巧 | 自定义tf.keras.Model的坑

    自定义tf.keras.Model需要注意的点 model.save() subclass Model 是不能直接save的,save成.h5,但是能够save_weights,或者save_form ...

  2. Vue1.0到2.0变化

    一.生命周期 二.代码片段 在vue1.0中可以在template编写时出现: <template> <div>第一行</div> <div>第二行&l ...

  3. 【转】vue1.0与2.0的一些区别

    一.生命周期钩子的差别 vue1.0的生命周期如下: vue2.0的生命周期如下: 用一张表格来做对比: 二.代码片段 在vue1.0中可以在template编写时出现: <template&g ...

  4. Vue1.0用法详解

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...

  5. 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统

    首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...

  6. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  7. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  8. vue1.0中$index一直报错的解决办法

    原文链接:https://www.cnblogs.com/liqiong-web/p/8144925.html 看学习视频,因为年份比较早了,其实vue早已迭代到vue2.0了,遇到一些问题: v-f ...

  9. vue1.0与vue2.0对于v-for的使用的区别

    vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...

随机推荐

  1. 解决JS中各浏览器Date格式不兼容的问题

    IE,Chrome和FireFox等浏览器都支持的一种日期格式是:2015/11/30 19:29:23. 所以,可以这样写: var timeStr = new Date("2015/11 ...

  2. eclipse中一些设置&配置项

    在学习过程中出现的一些问题,以备忘: 1.eclipse中手动生成项目目录结构                 按照这个项目结构建立文件夹,build path -configure build pa ...

  3. thinkPHP CRUD操作

    数据访问 以 nation 表为例 方法一  => select() ①造模型对象 $naiton = D('Nation');   //也可以使用M()方法 ②查询所有 $a = $natio ...

  4. DBN 入门学习资料整理

    建议按序阅读 1.Deep Learning 概述 Deep Learning(深度学习)学习笔记整理系列 : http://blog.csdn.net/zouxy09/article/details ...

  5. c51跑马灯

    ORG 0000HMOV 20H, #0FFHMOV 21H, #0FDHMOV 22H, #0FBHMOV 23H, #0F7HMOV 24H, #0EFHMOV 25H, #0DFHMOV 26H ...

  6. 与考试相关的JS方法

    var IsChange = 0;var ensure = 0;var timeCounter = (function () {//考试剩余时间 倒计时 var int; //var total = ...

  7. 一次 surface pro 3 的售后保修 黑色三月维权(HSD)

    已更新结束....原创 半根毛线 博文原址 http://www.cnblogs.com/hsd-/ 发现大量转载 转载请与作者联系 drizzle1996@outlook.com或注明转载 ---- ...

  8. [C# WPF]MoeEroViewer Developing Log

    [C# WPF]MoeEroViewer Developing Log 1st - Base Document run on Https://github.com/Amarillys/MoeEroVi ...

  9. Chapter 4: Troubleshoot and debug web applications

    Prevent and troubleshoot runtime issues Troubleshooting performance, security and errors using perfo ...

  10. css3 animation-fill-mode 对布局的影响

    问题描述:在小米手机上,animation-fill-mode设置为 both时,在手机上的web页面会超出屏幕宽度,出现滚动条. 解决方法:animation-fill-mode设为none. .p ...