vue的v-model绑定数据问题
在我的项目中有一个这样的功能模块:
我们修改数据全是在前台的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绑定数据问题的更多相关文章
- 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误
因为获取服务器是异步的,所以 vue 先绑定数据. 如果 ??? 是通过 ajax 异步获取的,在获取之前,???是未定义的.此时在外面的标签上添加一个 v-if="???" 可以 ...
- vue 结合localStorage 来双向绑定数据
结合localStorage 来双向绑定数据(超级神奇) localStorage.js: const STORAGE_KEY = 'todos_vuejs' export default { fet ...
- vue绑定数据之前 会看到源代码
http://blog.csdn.net/fengjingyu168/article/details/72915468 VUE绑定数据闪现问题 问题描述如下: 1.在HTML中使用Vue为div绑定数 ...
- Vue.js与angular在数据实现的思考
Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架 ...
- 剖析Vue原理&实现双向绑定MVVM-1
本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...
- 【前端】vue.js实现输入框绑定
vue.js实现输入框绑定 实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动 ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- ASP.NET MVC Model绑定(六)
ASP.NET MVC Model绑定(六) 前言 前面的篇幅对于IValueProvider的使用做个基础的示例讲解,但是没并没有对 IValueProvider类型的实现做详细的介绍,然而MVC框 ...
随机推荐
- JFreeChart的简单应用及乱码解决
一.JFreeChart介绍: JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP ...
- python_threading模块实现多线程详解(转)
综述 Python这门解释性语言也有专门的线程模型,Python虚拟机使用GIL(Global Interpreter Lock,全局解释器锁)来互斥线程对共享资源的访问,但暂时无法利用多处理器的优势 ...
- Linux查看本机登陆用户信息(w、who、last和lastlog命令)
w 命令 查看 Linux 服务器上目前已经登录的用户信息 [root@localhost ~]# w :: up :, users, load average:0.00, 0.00, 0.00 US ...
- 高通camera结构(摄像头基础介绍)
摄像头基础介绍 一.摄像头结构和工作原理. 拍摄景物通过镜头,将生成的光学图像投射到传感器上,然后光学图像被转换成电信号,电信号再经过模数转换变为数字信号,数字信号经过DSP加工处理,再被送到电脑中进 ...
- 机器学习实战笔记(Python实现)-07-模型评估与分类性能度量
1.经验误差与过拟合 通常我们把分类错误的样本数占样本总数的比例称为“错误率”(error rate),即如果在m个样本中有a个样本分类错误,则错误率E=a/m:相应的,1-a/m称为“精度”(acc ...
- 数据库还原,System.Data.SqlClient.SqlError: 因为数据库正在使用,所以无法获得对数据库的独占访问权。 (Microsoft.SqlServer.SmoExtended)
数据库还原问题: System.Data.SqlClient.SqlError: 因为数据库正在使用,所以无法获得对数据库的独占访问权. (Microsoft.SqlServer.SmoExtende ...
- 转载- ACM常见的各种说法
from : http://blog.csdn.net/qq_15015129/article/details/52738184 1.答案错误 —— wrong answer 就是最常见的.这个没办法 ...
- Android -- 两个activity界面的切换, 显示Intent 和 隐式Intent,putExtra传递数据
1. 两个Activity之间可以通过Intent切换, 包括显示Intent 和 隐式Intent. 实例代码 MainActivity.java public class MainActivity ...
- php 模拟 asp.net webFrom 按钮提交事件
由于公司需要php方面的项目开发,php刚刚入门,在写按钮提交过程中,asp.net里的按钮事件更好些.先看下面的代码, <? require_once '../inc/EventHelper. ...
- vim与shell切换
扩展一些vim的知识. vim与shell切换 :shell 可以在不关闭vi的情况下切换到shell命令行. :exit 从shell回到vim. 文件浏览 :Ex 开启目录浏览器,可以浏览当前目录 ...