Vue 修改成功之后我做了什么

2024-08-27 17:19:47

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方法原理应该也是一样的，感兴趣的小伙伴可以自己研究一下。）

最新文章

热门文章