Re: [問題] vue.js 的class的切換

看板Ajax作者 (愛書蟲)時間3年前 (2020/08/30 10:58), 編輯推噓2(313)
留言7則, 5人參與, 3年前最新討論串2/2 (看更多)
※ 引述《clerkhsiao (火球小子)》之銘言: : 因為工作上的需求, 最近開始自學 vue.js, 但遇上個問題一直解決不了, 所以想請問各位先進。 : 程式說明: : 以下的的小程式有搭配bootstrap, 按下新增鈕之後會新增資料, 每一筆新增的資料會連帶產生一個年代的的model, 在生日的年的input上click之後, 會跳出生日的年代的model, 在特定的年代上click之後, 圓圈會切換成被打勾的圖案 ( 透過切換fa_circle和fa_check_circle這兩個class的方式來產生效果 )。 : 問題說明: : 按下圓圈之後沒有切換成打勾的圖案, 我有用console.log把birthday_year這個陣列的值印出來, 按下的年代的值是有改變的( true 和 false的切換 ), 請問為什麼值有切換但效果卻沒出來呢? : https://i.imgur.com/tg2yXhs.jpg
: https://i.imgur.com/w5ofdsf.jpg
: 程式: : https://jsfiddle.net/clerkhsiao/w6puaxtn/16/ https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 這是Vue官網上的說明,雖然是英文版但可以切換成簡中。簡單來說,如果你是直接修改 一個物件內的值,vue是不會知道你有修改的(在javascript內,陣列也算是一種物件) 。這是因為Vue在比較前後屬性的差異時會使用到Javascript的call by sharing特性( 請自行google,本文不會多說明)。 以下是vue的二種解決方法,我也會介紹另一種問題比較少的解決方法 1.this.$set() Vue.set() 上面的二個方法都是指同一個,根據不同的呼叫點使用。這個方法簡單來說是告訴vue使用 者要修改某一物件/陣列中的某一個值,這樣Vue就會自動幫你處理物件/陣列和更新的問題 ,但有一個小問題,當你要處理的物件/陣列本身是多維時,使用set方法有時不會出現你 想要的結果。 2.this.$forceUpdate() Vue.forceUpdate() 這個方法簡單來說就是告訴vue,請幫我檢查"組件中所有屬性",同時處理更新,因為這個 方法是檢查所有屬性,所以會很吃效能,通常在一個組件中使用的一次就是極限了。但因 為這個方法很方便,通常都會濫用到拖慢效能。官網也不太建議使用這個方法(那你還開 這個API?) https://vuejs.org/v2/guide/components-edge-cases.html#Controlling-Updates 3.React中的解決方法 因為React中很強調不變性,在修改物件/陣列時不會直接修改內部的值,而是先產生一個 新的物件/陣列,再把這個新物件/陣列指定回本來的物件/陣列。 以下是react風格的使用方法 let newList = [...this.birthday_year].map((year,fs_circle,..otherts ) => { if (year === 1953) { return ({year,fs_circle: !fs_circle,...others}) } else { return ({year,fs_circle,...others}) } }) this.birthday_year = newList 一般來說我會比較建議使用React風格的解決方法,因為只要寫的出來就好,之後要增加 功能也方法,但你也可以使用Vue的方法就是了,對react和vue都會的小弟我說,vue的方 法真是太多餘了. -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.228.41.124 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1598756322.A.1AA.html

08/30 12:20, 3年前 , 1F
什麼call by sharing..vue就是埋setter而已
08/30 12:20, 1F

08/30 12:21, 3年前 , 2F
陣列不知道變了是因為他無法對陣列每個元素埋setter
08/30 12:21, 2F

08/30 13:55, 3年前 , 3F
推樓上
08/30 13:55, 3F

08/31 02:13, 3年前 , 4F
對不起,這篇太黑白講了忍不住要噓一下XD
08/31 02:13, 4F

08/31 10:42, 3年前 , 5F
你第三個寫法 map 本身就會回傳新的陣列了,不用複
08/31 10:42, 5F

08/31 10:43, 3年前 , 6F
製一份啊,而且參數是不是少用大括號啊
08/31 10:43, 6F

09/01 11:53, 3年前 , 7F
謝謝補充說明
09/01 11:53, 7F
文章代碼(AID): #1VInNY6g (Ajax)
討論串 (同標題文章)
文章代碼(AID): #1VInNY6g (Ajax)