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方法原理應該也是同樣的，感興趣的小夥伴能夠本身研究一下。）