Vue 修改为功以后我作了什么

Vue 修改为功以后我作了什么

背景：前端将修改的数据传递到后端，后端返回成功以后，咱们要将数据及时显示出来。
霸道方法一：从新请求接口
柔和方法二：修改为功以后的数据传递到源数据中，进行双向绑定显示。

我是怎么作的

有想过用霸道方法，剩下的时间就是本身的啦。哈哈。
可是今天我在这里进行了让步，明天我就会其余的事情上作出让步（20岁的小伙子摸什么🐟鱼咯，摸鱼🐟都是富人作的事情），因此仍是要迎难而上。

个人需求： 我须要对列表中的某一行进行修改，而后将修改且成功的数据从新放入列表中。
个人想法： 咱们知道Vue能够进行双项绑定，双向绑定又是基于存放在堆中数据引用控制的，因此咱们能够在点击修改的时候把源数据保存起来（将源数据引用保存起来）

保存源数据引用

data: function () {
        return {
            updateData: {
            // 须要修改的数据
                id: 0,
                meanings: [],
             
                // 为了修改不从新请求数据直接保存数据源
                baseData: []
            }
     }
 }

咱们先建立存放数据源的对象，而后只须要在点击修改的是时候将数据源引用传入baseDate对象中就能够了。

• 首先咱们固然是将修改对象进行赋值
• 而后将源数据存入baseData
• 使用不保存数据源的引用传入this.updateData.meanings进行修改操做（这里必定要使用不保存数据源引用的方式赋值，否则你修改this.updateData.meanings也会到源数据进行直接修改，尚未修改为功，就已经将列表数据修改掉了。）

反向修改源数据

当后端返回修改为功以后咱们就须要将修改以后的数据，反向到源数据中。这个时候咱们以前建立的baseData对象就起做用啦。由于baseData就是源数据。

• 由于个人业务需求，我保存的是一个数组，因此我须要将baseData源数据的长度修改成我修改后数据的长度。（主要是给各位小伙伴安排位置坐下来，看我献丑）
• 而后就是在不改变源数据数据引用的前提下面进行修改数据。（这里我用到了Vue.set方法，由于本身再去使用遍历拿到this.updateData.meanings[i] 对象中数据的值，而后进行一一赋值，代码太多了，既然有写好的api因此我就直接使用了。Vue.set方法原理应该也是同样的，感兴趣的小伙伴能够本身研究一下。）