在我的项目中有一个这样的功能模块:

  我们修改数据全是在前台的table中修改,然后把这个table的值带到后台。(理想:修改值后,点击确认值改变,点击取消值恢复原来的值)那么问题就来了:

a)你修改值的时候这时候vue 的v-model的双向绑定这个特性就体现出来了。

所以我们在修改的那个方法中加入

editDirector(row, _index) {
let _row = JSON.parse(JSON.stringify(row));
this.editForm = _row;加入以上两句
this.selected = _index;这个是我标记修改的是哪一个 在data return定义 selected: -1, //记录修改位置 一个负值就行了
},

这时候v-model双向绑定这个特性就没了。

下面就考虑点击确定就修改,取消则不变:

在script 引入

import Vue from 'vue'

在确定按钮上加上

Vue.set(this.tbAddManagementChangeRecord, this.selected, this.editForm);
this.tbAddManagementChangeRecord 这个是table所以的数据,
this.selected 这个是你所记录要修改table的哪条记录,
this.editForm 这个是你修改的数据

在取消按钮不做操作 关闭弹框就行了

这样功能就完成了

vue的v-model绑定数据问题的更多相关文章

  1. 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  2. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  3. debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误

    因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...

  4. vue 结合localStorage 来双向绑定数据

    结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...

  5. vue绑定数据之前 会看到源代码

    http://blog.csdn.net/fengjingyu168/article/details/72915468 VUE绑定数据闪现问题 问题描述如下: 1.在HTML中使用Vue为div绑定数 ...

  6. Vue.js与angular在数据实现的思考

    Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架 ...

  7. 剖析Vue原理&实现双向绑定MVVM-1

    本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...

  8. 【前端】vue.js实现输入框绑定

    vue.js实现输入框绑定 实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动 ...

  9. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  10. ASP.NET MVC Model绑定(六)

    ASP.NET MVC Model绑定(六) 前言 前面的篇幅对于IValueProvider的使用做个基础的示例讲解,但是没并没有对 IValueProvider类型的实现做详细的介绍,然而MVC框 ...

随机推荐

  1. 【android】使用RecyclerView和CardView,实现知乎日报精致布局

    完整代码,请参考我的博客园客户端,git地址:http://git.oschina.net/yso/CNBlogs 在写博客园客户端的时候,突然想到,弄个知乎日报风格的简单清爽多好!不需要那么多繁杂的 ...

  2. RenderScript多输入参数

    https://stackoverflow.com/questions/20783830/how-to-use-renderscript-with-multiple-input-allocations ...

  3. jQuery与直接写JS的区别详细解析

    jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下所示.需要的朋友可以过来参考下     要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比 ...

  4. 手动加载B120i/B320i阵列卡驱动安装RHEL7.0

    实验设备: Micro server Gen8(B120i) DL360e Gen8(B320i) 目录 一.前期准备... 1 二.加载阵列卡驱动... 11 三.手动分区... 21 四.安装设置 ...

  5. 为什么@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class})

    Spring Boot会自动根据jar包的依赖来自动配置项目,例如当你项目下面有HSQLDB的依赖,Spring Boot会自动创建默认的内存数据库的数据源DataSource, 但我们使用Mybat ...

  6. 20145307《信息安全系统设计基础》第五周学习总结PT2

    20145307<信息安全系统设计基础>第五周学习总结PT2: 教材学习内容总结 之前有第一部分学习总结: http://www.cnblogs.com/Jclemo/p/5962219. ...

  7. C++DFS方法全排列

    前几天看纪磊的<啊哈!算法>一书,里面讲算法讲的特别通俗细致,真的是初中生都能读得懂的算法书(我大二才读:P).这段代码很适合初学算法的同学. #include<iostream&g ...

  8. ArrayBlockingQueue,LinkedBlockingQueue分析

    BlockingQueue接口定义了一种阻塞的FIFO queue,每一个BlockingQueue都有一个容量,让容量满时往BlockingQueue中添加数据时会造成阻塞,当容量为空时取元素操作会 ...

  9. [CF1051F]The Shortest Statement

    题目大意:给定一张$n$个点$m$条有权边的无向联通图,$q$次询问两点间的最短路 $n\le100000$,$m\le100000$,$1\le100000$,$m$-$n\le20$. 首先看到$ ...

  10. jsp选项卡导航实现——模板

    效果 刚进来页面的样子 在第二个选项卡上方时 点击后 离开 同样第三个 点击 移走鼠标 代码 <%@ page contentType="text/html;charset=UTF-8 ...