Vue 修改成功之后我做了什么
背景:前端将修改的数据传递到后端,后端返回成功之后,我们要将数据及时显示出来。
霸道方法一:重新请求接口
柔和方法二:修改成功之后的数据传递到源数据中,进行双向绑定显示。
我是怎么做的
有想过用霸道方法,剩下的时间就是自己的啦。哈哈。
但是今天我在这里进行了让步,明天我就会其他的事情上做出让步(20岁的小伙子摸什么🐟鱼咯,摸鱼🐟都是富人做的事情),所以还是要迎难而上。
![](https://i-blog.csdnimg.cn/blog_migrate/a454f4353a8d63b87e6e24230d978630.png)
保存源数据引用
data: function () {
return {
updateData: {
// 需要修改的数据
id: 0,
meanings: [],
// 为了修改不重新请求数据直接保存数据源
baseData: []
}
}
}
我们先创建存放数据源的对象,然后只需要在点击修改的是时候将数据源引用传入baseDate对象中就可以了。
![](https://i-blog.csdnimg.cn/blog_migrate/20a4ad2616984f9d57a2f2c85d21216d.png)
- 首先我们当然是将修改对象进行赋值
- 然后将源数据存入baseData
- 使用不保存数据源的引用传入this.updateData.meanings进行修改操作(这里一定要使用不保存数据源引用的方式赋值,不然你修改this.updateData.meanings也会到源数据进行直接修改,还没有修改成功,就已经将列表数据修改掉了。)
反向修改源数据
当后端返回修改成功之后我们就需要将修改之后的数据,反向到源数据中。这个时候我们之前创建的baseData对象就起作用啦。因为baseData就是源数据。
![](https://i-blog.csdnimg.cn/blog_migrate/0510b0e25dde87fd2b12554ae7f282d4.png)
- 因为我的业务需求,我保存的是一个数组,所以我需要将baseData源数据的长度修改为我修改后数据的长度。(主要是给各位小伙伴安排位置坐下来,看我献丑)
- 然后就是在不改变源数据数据引用的前提下面进行修改数据。(这里我用到了Vue.set方法,因为自己再去使用遍历拿到this.updateData.meanings[i] 对象中数据的值,然后进行一一赋值,代码太多了,既然有写好的api所以我就直接使用了。Vue.set方法原理应该也是一样的,感兴趣的小伙伴可以自己研究一下。)