vue數組更改頁面無法刷新


今一個圖片列表的數組,在新增數據時頁面會同步相應,但是進行刪除操作時老是無法實現頁面及時刷新,使用過vue set也沒見效果,糾結半天,哎原來是嵌套對象的坑

一、圖片上傳時

在這里插入圖片描述
頁面加的圖片列表的html

在這里插入圖片描述
這里是一個方法調用接口獲取一些返現的數據 賦值給ruleForm,其中dataImages是一個保存圖片的數組對象

下面就是頁面返現圖片或者上傳,刪除操作

在這里插入圖片描述
在這里插入圖片描述
而就是在這個進行刪除的操作時發現了刪除完 dataImages中的數據,頁面沒有刷新的問題

試過許多辦法無果,最后還是在看console中發現了端倪

1、第一種在刪除dataImagesconsole.log(this.ruleForm.dataImages)
在這里插入圖片描述
2、第二種在刪除dataImagesconsole.log(this.ruleForm.dataImages)
在這里插入圖片描述

看上面都是進行dataImages對象的splice后console后的結果,有啥不一樣嗎

其實很不相同(一個被觀察一個沒有)
在這里插入圖片描述

看到這里終於,醒悟了,原來是data中這里只寫了一個ruleForm 而他的子元素dataImages並未寫進去
在這里插入圖片描述

到這里問題水落石出,解決方法自然不用說了
在這里插入圖片描述

修改刪除方法 再次執行操作
在這里插入圖片描述
ok 執行完刪除操作頁面同步更新了
在這里插入圖片描述

二、圖片返現時

上面圖片上傳問題解決了但是這里發現圖片再次返現又是一個問題
在這里插入圖片描述
看這個返現后的圖片刪除操作又出現了同樣的問題

在這里插入圖片描述
這個是請求后台接口獲得了數據,將其賦值給了臨時變量tempProjImages, 可以覺得這個參數錯誤了是吧,no並不是,這里重新定義一個參數是為了解決另一個問題


在這里插入圖片描述
這是保存時發生異常后圖片重新加載了一堆異常image

why?

來看一個save 方法就明白了

在這里插入圖片描述

似乎明白了些
在這里插入圖片描述

好了,再回到上面那個問題,其實這里是引用對象,內存地址修改的問題

看這里,這是fetchData方法在初始化rulForm
在這里插入圖片描述

雖然在data 中定義了tempProjImages在vue 初始化的時候該值會被觀察起來,然而在后來將其引用地址
重新指定到了另一個對象,觀察也就無效了

於是最后使用set 為ruleForm添加一個響應式對象tempProjImages 整體修改如下

在這里插入圖片描述
問題解決,記錄下菜菜的經歷,希望大神勿噴


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM