zoukankan      html  css  js  c++  java
  • 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 这个是你修改的数据

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

    这样功能就完成了

  • 相关阅读:
    idp 苹果开发账号续费
    rtx修改方法
    备份恢复IIS的设置
    CLR/C# 的一些语言特性
    LNMP(linux+nginx+mysql+php)服务器环境配置
    PostgreSQL Hot Standby
    Fail2ban
    Linux下安装Tomcat
    Linux下安装Jboss
    RHEL 5.4下部署LVS(DR)+keepalived实现高性能高可用负载均衡
  • 原文地址:https://www.cnblogs.com/chiang28/p/9999806.html
Copyright © 2011-2022 走看看